• 组合式API
  • teleport
  • 片段
  1. 组合式API
    vue2中,我们会在data中定义一些变量,在methods中定义方法,在props中获取父级传过来的数据,还在外面写生命周期函数和watch、computed等等。这样就导致代码是一块一块的,使代码难以阅读理解。
    vue3中,上面说的所有内容除了props都放在了setup函数中


setup 函数有两个参数,一个是props,一个是context(相当于this),所以vue3中没有this。
setup中定义响应式变量方式:
通过ref函数来定义一个基本类型的变量:

import {ref} from 'vue'
const num = ref(0)

通过reactive函数来定义一个数组或对象类型的变量:

import {reactive} from 'vue'
const obj = reactive({ count: 0 })

但相对于toRef和toRefs,ref和reactive又是不响应的,因为他们在引用别的数据中的值时仅仅是拷贝,而toRef和toRefs才是真正的引用:
比如在

const obj = { name:"zhangsan"}
//此时ref只是拷贝了“zhangsan”这个值,后面name2的改变并不会影响obj中name的值
let name2 = ref(obj.name)
//toRef将某个对象中的属性变成响应式数据,修改响应式数据是会影响到原始数据的。
let name3 = toRef(obj.name)
//toRefs将整个对象变成响应式数据,修改响应式数据是会影响到原始数据的。
let name4 = toRefs(obj)

2.vue2的watch和vue3的watchEffect区别:
watchEffect会在引用的任意一个数据变化是执行,而不是像watch监听某个属性,初始会被调用,与computed类似,不同的是watchEffect没有return;
3.数据劫持原理区别:
vue3中使用的是proxy来进行数据劫持,相比较vue2的object.defineProperty可以直接监听数组和对象,而object.defineProperty是需要去另外通过遍历来监听对象的每个属性;
因此vue2中的数据劫持有个缺点:直接改变数组长度或者实用下标去修改数据项时是无法监听的。
解决该缺点:通过$ set修改,比如:this.$ set(arr,index,value)

posted on 2021-12-02 17:19  秃头大宝贝  阅读(115)  评论(0)    收藏  举报