Study twenty-three, Vue 3.0 study notes

Vue3.0

• Changes in source code organization

  • All code is written in TypeScript

  • Use Monorepo to manage project structure

  • All functional modules are split into separate packages for development, which can be developed, tested and released separately

• Composition API

  90% of the new APIs are 2.X compatible

• Performance improvement

  Significantly improve, rewrite the response style, use proxy, the performance of server-side rendering is improved by 2-3 times

• Quickly

  Solutions for running projects directly without packaging

Different build versions

• cjs

  • vue.cjs.js

  • vue.cjs.prod.js

• global

  • vue.global.js

  • vue.global.prod.js

  • vue.runtime.global.js

  • vue.runtime.global.prod.js

• browser

  • vue.esm-browser.js

  • vue.esm-browser.prod.js

  • vue.runtime.esm-browser.js

  • vue.runtime.esm-browser.prod.js

• bundler

  • vue.esm-bundler.js

  • vue.runtime.esm-bundler.js

Performance improvement

• Responsive system upgrade

• Compilation optimization

• Optimization of source code volume

• DefineProperty, the core of the responsive system in Vue.js 2.x

• Rewrite the reactive system with Proxy object in Vue.js 3.0

  • Can monitor dynamically added attributes

  • Can monitor deleted attributes

  • Can monitor the index and length properties of the array

• Vue.js 2.x optimizes the process of diff by marking the static root node

• In Vue.js 3.0, all static root nodes are marked and promoted. When diffing, only dynamic node content needs to be compared

  • Fragments (upgrade vetur plugin)

  • Static boost

  • Patch flag

  • Cache event handler

• Optimize packing volume

  • Some uncommon APIs have been removed in Vue.js 3.0

    • For example: inline-template, filter, etc.

  • Support Tree-shaking

Vue.3.0js responsive review

• Proxy object implements property monitoring

• Multi-level attribute nesting, the next level of attributes is processed in the process of accessing attributes by default to monitor dynamically added attributes

• The delete operation of the default monitoring attribute

• Default listening array index and length property

• Can be used as a separate module

• Core method:

    - 主要依赖于 Proxy 对象，创建拦截器 handler， 设置 get/set/deleteProperty 实现属性监听
  
    - reactive 实现对象的监听
  
    - ref 实现基础数据类型的监听
  
    - toRefs 实现对象属性的监听
  
    - computed 实现计算属性 
  
    - effect 定义副作用函数
  
    - track 实现依赖收集
  
    - trigger 触发响应式
  
    - receiver 为当前的 proxy 对象 或者 继承 proxy 的对象
  
    - 响应式的过程中会将 监听的对象 存储在一个 targetMap(weakMap) 中,他的值是对应的响应式的集合，存放在 depsMap(Map) 中, dep 的值是一个 Set 集合，
  
    存储了对应的 effect，触发时只需要遍历 dep 即可。
  

Composition API

• RFC(Request For Comments)

  • https://github.com/vuejs/rfcs·Composition

• RFC API

  • https://composition-api.vuejs.org

• Design motivation

  • Options API

    • Contains an object describing component options (data, methods, props, etc.)

    • Options API develops complex components, the code of the same functional logic is split into different options

  • Composition API

    • A new set of APIs in Vue.js 3.0

    • A set of function-based APIs

    • The logic of components can be organized more flexibly

createApp

• Used to create Vue objects

setup

• Entry to the Composition API

reactive

• Create responsive objects

toRefs

• Traverse the proxy object, so that the properties of the proxy object become responsive

ref

• Create a responsive object of basic data type

watch

• Three parameters of Watch

  • The first parameter: the data to be monitored

  • The second parameter: the function to be executed after monitoring the data change, this function has two parameters, the new value and the old value

  • The third parameter: option object, deep and immediate

• return value of watch

  • Function to cancel listening

watchEffect

• Is a simplified version of the watch function, also used to monitor changes in data

• Receive a function as a parameter, and monitor the changes of responsive data in the function

Custom instruction

• View 2.x

Vue.directive("editingFocus", {
    
    

  bind(el, binding, vnode, prevVnode) {
    
    },

  inserted() {
    
    },

  update() {
    
    },

  componentUpdated() {
    
    },

  unbind() {
    
    },

});



Vue.directive("editingFocus", (el, binding) => {
    
    

  binding.value && el.focus();

});

• View 3.0

app.directive("editingFocus", {
    
    

  beforeMount(el, binding, vnode, prevVnode) {
    
    },

  mounted() {
    
    },

  beforeUpdate() {
    
    },

  updated() {
    
    },

  beforeUnmount() {
    
    },

  unmounted() {
    
    },

});



app.directive("editingFocus", (el, binding) => {
    
    

  binding.value && el.focus();

});