1.响应式原理发生了变化,vue2是用的Object.defineProperty监听对象属性的变化,从而实现响应式;vue3使用的是Proxy
export default {
data() {
return {
someObject: {}
}
},
mounted() {
const newObject = {}
this.someObject = newObject
console.log(newObject === this.someObject) // false
}
}
当你在赋值后再访问 this.someObject,此值已经是原来的 newObject 的一个响应式代理。与 Vue 2 不同的是,这里原始的 newObject 不会变为响应式:请确保始终通过 this 来访问响应式状态。
2.diff算法,渲染算法的改变。 Vue3优化diff算法。不再像vue2那样比对所有dom,而采用了block tree的做法?(todo)。此外重新渲染的算法里也做了改进,利用了闭包来进行缓存。这使得vue3的速度比vue2快了6倍。
3.vue2使用的是option api(选项式api),有data,methods,computed。vue3有2种不同的书写风格:选项式 API 和组合式 API。推荐使用组合式api。
4.vue2创建响应式数据必须在data中声明,而vue3中需要使用ref或reactive
5.vue2中this指向组件实例,获取props的值可以直接this.props.;vue3中this已不再指向组件实例,如果需要访问props,则可以通过setup的参数
export default {
setup(props, { attrs, slots, emit, expose })
{ ... }
}
如果需要访问组件实例,则可以通过
const vm = getCurrentInstance()!.proxy;
6.v-model的使用也有变化哦,突然发现还用vue2的写法,在vue3里面实现不了
staging-cn.vuejs.org/guide/compo…
vue2中的modal选项好像没用了,换成下面这种
props: ['title'],
emits: ['update:title']
vue3中v-model可以添加参数和修饰符,一个组件上可以使用多个v-model
7.vue3中.sync好像没有了