Vue3 study summary notes (thirteen)

1. Introduction to Vue3

---

Vue3 code name: One Piece (One Piece).

---

The advantages of vue3 over vue2:

• Reduced pack size, faster rendering, and less memory.

Source code upgrade:

• Use Proxy instead of ObjectDefineProperty to implement reactive.
• Vue3 can better support TypeScript.

---

2. Create a Vue3 project project

2.1 Create with Vue-cli

---

Prerequisite: Make sure the version of @vue/cli is before 4.5.0!

# 查看版本命令
vue -V  或者 vue --version
# 创建一个名为vue3_test的项目
vue create vue3_test
# 注意中间要选择Vue3版本！！！

2.2 Use Vite to create a Vue3 project

---

Vite is a new generation of front-end development build tools. Same as Webpack functionality.

Official address: https://vitejs.cn/

Advantages of vite:

• In the development environment, no packaging operation is required, and a cold start can be performed quickly.
• Lightweight Fast Heat Load (HMR).
• True on-demand editing, no longer waiting for the entire application to compile.

The former in the figure is to prepare all the modules first, and then build the server server. The latter is to prepare the server first, and then find the corresponding module through the request, which is just the opposite of the previous one, which is faster.

---

The command is as follows:

# 创建工程
npm init vite-app <project-name>
# 进入工程目录
cd <project-name>
# 安装依赖
npm install
# 运行
npm run dev

3. Analysis project structure of Vue3

---

The main.js file structure is as follows:

//引入的不再是Vue构造函数了，而引用的是createApp就是创建一个应用的工厂函数。
import {
    
     createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象-app(类似于之前vue2中的vm，但app比vm更轻)
const app = createApp(App)
console.log('@@@',App)

//mount就是挂载，与vue3不同的是没有了$符号。
app.mount('#app')

setTimeout(()=>{
    
    
    //调用unmount可以卸载app应用
    app.unmount('#app')
},3000)

// 注意vue3构想的项目，并不支持vue2的写法！！！
// vue2 的写法，通过el或者$mount来指定容器，通过render来渲染。
// const vm = new Vue({
    
    
//     // el:'#app'
//     render:(h)=> h(App)
// })
//
// vm.$mount('#app')

The structure of createApp(App) is as follows:

Inside the component, the template structure can have no root tag.

3. Install developer tools for Vue3

---

Vue's dev-tools installation package: https://gitee.com/it-sherlock/develop-common-parameters/tree/master/%E5%89%8D%E7%AB%AF/Vue/dev-tools

4. Vue3 setup

---

Composition API: Composition API

setup is a new configuration item for Vue3.

setup is the performance stage for all Composition APIs.

What is used in the component: 数据，方法等等，均要配置在setup中！！！In Vue2, the data should be configured in the data configuration item, and the method should be configured in the methods.

---

setup can directly return data and methods:

setup can also return a render function:

---

In the vue3 project, the data and methods of vue2 can be configured, but it is not recommended! !

vue3的setup是不能够访问到vue2的data，methods等一些数据和方法的！！

Summarize:

Note: setup cannot be decorated with async. If it is added, async will wrap its return value as a promise object, so the return value of setup is not a simple object.

5. The ref function of Vue3

5.1 The ref function handles basic data types

---

Premise: first introduce the ref function, from vue!

import {
    
    ref} from 'vue'

The ref in vue2 is used as an attribute, similar to the id selector, for identification.

In vue3, there is an additional ref function, which can make the defined data responsive. Variables defined and returned directly in setup are not responsive, and the page will not change when the value changes!

For 基本数据类型而言, the ref function is implemented using the ObjectDefineProperty method, and the get and set methods are used to implement responsiveness.

5.2 The ref function handles object types

---

The ref function, for dealing with object data types, uses ES6's Proxy object.

For objects, simply use the object.value.property name to trigger the response.

Summarize:

6. The reactive function of Vue3

---

Premise: Also in vue, the reactive function is introduced

import {
    
    reactive} from 'vue'

Don't use reactive functions to deal with basic data types, reactive is designed to deal with object types! !

The ref function can also deal with object types, because it also uses reactive functions at the bottom when dealing with objects.

The bottom layer of reactive is no longer responsive through the ObjectDefineProperty function. Instead, it is implemented through Proxy.

---

The reactive function can support the responsiveness of deep-level object data, as well as the responsiveness of array data.

Little knowledge points:

• The data in the array modified by index in vue2 will not trigger responsiveness. Generally, the responsive indexing of data data is triggered by $set in vue2.
• Of course, in vue2, responsiveness can be triggered by a property in the index item! For example: vm.list[3].a = 456.
• vue3就弥补了vue2的这个缺点，即便是通过索引赋值也能够触发响应式！

---

The reactive function uses:

• The general form is:const 代理对象 = reactive（源对象） 就是将源对象加工成为代理对象(Proxy的实例对象，简称proxy对象)。
  

The interior of reactive is based on ES6's Proxy implementation, which operates on the internal data of the source object through the proxy object.

7. Compare Vue3 with vue2

7.1 Vue2 responsive principle and precautions

---

The array push of vue2 does two things, one is to add data to the array, and the other is to update the page data.

Because Vue2 uses the get and set methods in the ObjectDefineProperty method, get is used for acquisition, and set is used for modification, however对于添加和删除却是无可奈何的！！

The vue2 object adds a property:

• New attributes cannot be added directly by means of person.sex = 'female', which will not trigger responsiveness!
  
  vue2 removes a property:
• Deleting name directly through the native delete this.person.name will not trigger responsiveness!
  

Operations on vue2 arrays:

Summarize:

7.2 The responsive principle of Vue3

7.2.1 Proxy objects

---

With reactive, vue3 makes up for the above shortcomings that vue2 cannot directly add and delete, and array index items cannot be directly assigned!

Again, Object.defineProperty can detect get access and set settings, but cannot detect delete and add properties. So there are still some bugs!

---

ES6 Proxy object:

• The Proxy object is on the window and can be viewed through window.proxy.

//源数据
let person = {
    
    
    name:'张三',
    age:18
}
const p = new Proxy(person,{
    
    })
console.log(p)

//Vue3的响应式，通过配置第二个参数handler对象来达到响应式
const p = new Proxy(person,{
    
    
    //读取p的某个属性时调用
    get(target, propName, receiver) {
    
    
        console.log(`有人读取了p身上的${
      
      propName}属性`)
        console.log(target)
        console.log(propName)
        return target[propName]
    },
    //修改p的某个属性时调用 和 新增p的某个属性时调用
    set(target, propName, value, receiver) {
    
    
        console.log(`有人修改了p身上的${
      
      propName}属性，我要更新页面了！`)
        console.log(target)
        console.log(propName)
        console.log(value)
        target[propName] = value
    },
    //删除p的某个属性时调用
    deleteProperty(target, propName) {
    
    
        console.log(`有人删除了p身上的${
      
      propName}属性，我要更新页面了！`)
        //delete返回的是一个布尔值，同时deleteProperty也要返回一个布尔值！！
        let boolean = delete target[propName]
        return boolean
    }
})

7.2.2 Reflect objects

---

Reflect can also obtain, modify, add, and delete properties of objects.

---

Comparison of Object.defineProperty and Reflect:

Reflect is relatively robust! !

---

The addition, deletion, modification and inspection of objects at the bottom of vue3 does not directly use the target operation, but operates through the Reflect function as follows:

//Vue3的响应式，通过配置第二个参数handler对象来达到响应式
const p = new Proxy(person,{
    
    
    //读取p的某个属性时调用
    get(target, propName, receiver) {
    
    
        console.log(`有人读取了p身上的${
      
      propName}属性`)
        console.log(target)
        console.log(propName)
        return Reflect.get(target,propName)
    },
    //修改p的某个属性时调用 和 新增p的某个属性时调用
    set(target, propName, value, receiver) {
    
    
        console.log(`有人修改了p身上的${
      
      propName}属性，我要更新页面了！`)
        console.log(target)
        console.log(propName)
        console.log(value)
        Reflect.set(target,propName,value)
    },
    //删除p的某个属性时调用
    deleteProperty(target, propName) {
    
    
        console.log(`有人删除了p身上的${
      
      propName}属性，我要更新页面了！`)
        //delete返回的是一个布尔值，同时deleteProperty也要返回一个布尔值！！
        let boolean = Reflect.deleteProperty(target,propName)
        return boolean
    }
})

---

Summarize:

8. What is the difference between reactive function and ref function

---

9. Key points to note

9.2 Recall several component properties of Vue2

---

The role of the $attrs attribute:

The role of $slot:

• Finally, the virtual dom is converted into a real dom.
  
• Generally, the template tag plus the slot attribute is used to specify the slot name, so that the placement label can be specified.
• Specify the slot name in two ways: slot="xxx" or v-slot:xxx.
  
  

9.3 Two notes for Vue3 setup

---

The execution time of setup:

• Executed once before beforeCreate, this is undefined.
  

---

The props parameter of setup uses:

• Note: The properties passed from the vue3 parent component should also be placed in the props configuration item!
  

---

The second parameter context of setup:

• The role of context.attrs:
  

• Use of context.emit and emits configuration items:
  

• Use of context.slots:
  

---

Summarize:

10. Computed computed properties in Vue3

---

In the setup configuration item, this is definitely not used, because the setup will be automatically executed before beforeCreate, and this is undefined if printed!

Computed in the form of vue2 can also be used in vue3 projects, and the corresponding this is naturally the vue object.

vue3 turns computed into a composable api!

Vue3 is written as follows:

• Remember to import the computed api.

import {
    
    computed} from 'vue'

setup(){
    
    
  let person = reactive({
    
    
    firstName: '张',
    lastName: '三',
    age: 18,
  })

  //计算属性 简写形式只考虑计算属性读，没有考虑计算属性的改
  // person.fullName = computed(()=>{
    
    
  //   return person.firstName + '-' + person.lastName
  // })

  //计算属性 完整写法(读写)
  person.fullName = computed({
    
    
    get(){
    
    
      return person.firstName + '-' + person.lastName
    },
    set(value){
    
    
      const nameArr = value.split('-')
      person.firstName = nameArr[0]
      person.lastName = nameArr[1]
    }
  })

  return {
    
    
    person
  }
 }

Summarize:

11. The watch property of Vue3

11.1 Vue2 watch usage

---

Vue2's watch uses:

watch:{
    
    
  //vue2的监听简易写法：直接通过 数据对象名定义函数来监听
  // sum(newValue,oldValue){
    
    
  //   console.log('sum的值变化了',newValue,oldValue)
  // },
  //vue2监听完整写法：
  sum:{
    
    
    immediate:true, // 配置立即监听属性，一进来就先执行一次。
    deep:true, // 深度监视属性
    handler(newValue,oldValue){
    
    
      console.log('sum的值变化了',newValue,oldValue)
    }
}

11.2 Vue3 watch listens to the data defined by the ref function

---

The watch monitor ref function is as follows:

<template>
  <h2>当前求和为：{
    
    {
    
    sum}}</h2>
  <button @click="sum++">点我+1</button>
  <h2>当前的信息为:{
    
    {
    
    msg}}</h2>
  <button @click="msg += '!'">修改信息</button>
</template>

<script>
import {
    
    ref,watch} from 'vue'

export default {
    
    
  name:'Demo',
  setup(){
    
    
    //数据
    let sum = ref(0)
    let msg = ref('你好啊')

    //情况一：监视ref所定义一个的响应式数据
    // watch(sum,(newValue,oldValue)=>{
    
    
    //   console.log('sum变了',newValue,oldValue)
    // })

    //情况二: 监视ref所定义的多个响应式数据
    //第一个参数：监听的数据。第二个参数：监听的函数。第三个参数：配置项
    watch([sum,msg],(newValue,oldValue)=>{
    
    
      //此时的newValue和oldValue就变成了数组
      console.log(newValue) //[0, '你好啊!']
      console.log(oldValue)//[0, '你好啊']
      console.log('sum变了',newValue,oldValue)
    },{
    
    immediate:true,deep:true})

    return {
    
    
      sum,
      msg
    }
  }
}
</script>

11.3 Vue3 watch listens to the data of the reactive function

---

The monitoring format is as follows:

• Note 1: If the watch directly listens to the proxy object generated by the reactive function, it cannot obtain the oldValue normally! !

//就算用ref函数操作，因为是对象，对于对象ref还是走的reactive函数！
let person = reactive({
    
    
  name:'张三',
  age:18
})
//监视reactive所定义的一个响应式数据
watch(person,(newValue,oldVale)=>{
    
    
  //注意：这里newValue和oldVale一样，也就是无法获得正常的oldValue
  //这个问题目前无法解决！
  console.log(newValue)//{name: '张三~', age: 19}
  console.log(oldVale)//{name: '张三~', age: 19}
  console.log('person的age变化了')
})

Solution: If you really need to get oldValue for business, you can only take this property out of the object and use it in the ref function!

//单独把age拿出来，用ref来声明就可以监听到！！
let age = ref(18)

//就算用ref函数操作，因为是对象，对于对象ref还是走的reactive函数！
let person = reactive({
    
    
  name:'张三', 
})
//监视reactive所定义的一个响应式数据
watch(age,(newValue,oldVale)=>{
    
    
  //注意：这里newValue和oldVale一样，也就是无法获得正常的oldValue
  //这个问题目前无法解决！
  console.log(newValue)
  console.log(oldVale)
  console.log('person的age变化了')
})

• Note 2: Vue3's watch is forced to enable deep monitoring (deep configuration is invalid!).
  

• Note 3: To monitor a property of the reactive function object, the steps are as follows:

let person = reactive({
    
    
  name:'张三',
  age:18,
  job:{
    
    
    j1:{
    
    
      salary: 20
    }
  }
})
//对象的某个属性，必须要用函数才能监听！！！
watch(()=>person.age,(newValue,oldVale)=>{
    
    
  console.log(newValue)
  console.log(oldVale)
  console.log('person的age变化了')
})

• Note 4: Multiple properties of the listening object, in the following form:

//监视reactive所定义的一个响应式数据中的 多个属性！
let person = reactive({
    
    
  name:'张三',
  age:18,
  job:{
    
    
    j1:{
    
    
      salary: 20
    }
  }
})
//那就将其多个函数写成数组的形式
watch([()=>person.age,()=>person.name],(newValue,oldVale)=>{
    
    
  console.log(newValue)
  console.log(oldVale)
  console.log('person变化了')
})

• Note 5: Special circumstances! Listen to the object properties of the reactive proxy object. At this time, it is no longer mandatory for deep monitoring, and the deep configuration works! ! ! If the monitoring is a reactive proxy object, this watch is a forced deep monitoring! ! !

 let person = reactive({
    
    
   name:'张三',
   age:18,
   job:{
    
    
     j1:{
    
    
       salary: 20
     }
   }
 })
 //监听一个对象里面的对象属性,因为我们更改的是对象中的对象的对象数据!!
 //所以必须开启深度监视deep！！
 watch(()=>person.job,(newValue,oldVale)=>{
    
    
   console.log(newValue)
   console.log(oldVale)
   console.log('person的job变化了')
 },{
    
    deep:true})

Summarize:

12. The .value problem of watch in Vue3

---

Note 1: Listen to the basic data type defined by ref, and cannot add sum.value!!

• For basic data types, if .value is added, it will monitor the value of sum.value! Not the variable sum!

//数据
let sum = ref(0)
let msg = ref('你好啊')

let person = ref({
    
    
  name:'张三',
  age:18,
  job:{
    
    
    j1:{
    
    
      salary: 20
    }
  }
})

//监听ref定义的基本数据类型，不能添加sum.value!!
//如果添加上了.value那监听的就是sum.value的这个值！并不是sum这个变量！
watch(sum,(newValue,oldValue)=>{
    
    
  console.log('sum的值变化了',newValue,oldValue)
})

Note 2: In the form of a ref proxy object, the effect of monitoring is achieved through .value.

• Because he is a refImpl object (ref function) that contains a proxy (reactive function) object, it is impossible to monitor the object directly!
  
• A simpler way is to configure a deep: false directly. Deep surveillance

let person = ref({
    
    
  name:'张三',
  age:18,
  job:{
    
    
    j1:{
    
    
      salary: 20
    }
  }
})
watch(person,(newValue,oldValue)=>{
    
    
  console.log('person的值变化了',newValue,oldValue)
},{
    
    deep:true}) // 开启深度监视就能监视到了！

13. The watchEffect function of Vue3

---

watchEffect also has the effect of monitoring, but Yu watch is different!

• watchEffect follows whoever is used to watch it!

export default {
    
    
  name:'Demo',
  setup(){
    
    
    //数据
    let sum = ref(0)
    let msg = ref('你好啊')

    let person = reactive({
    
    
      name:'张三',
      age:18,
      job:{
    
    
        j1:{
    
    
          salary: 20
        }
      }
    })

    //watchEffect是用了谁，就监视谁！
    watchEffect(()=>{
    
    
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('watchEffect所指定的回调执行了！')
    })

    return {
    
    
      sum,
      msg,
      person
    }
  }

Summarize:

• Both computed and watchEffect are called and executed when the data they use changes, but there is still a difference!