手机上如何做网站,酒网站模板,做logo那个网站,广州h5网站制作公司setup是组合式API
选项式API#xff0c;是data,methods,computed#xff0c;watch等等全都是分开的#xff0c;但是组合式API是把这些东西全都写在一起了。
1 vue2的缺点
(1)使用vue2
Vue2版本对数据的拦截用的是Object.defineProperty,
可以监测到对象的变化。因为o…setup是组合式API
选项式API是data,methods,computedwatch等等全都是分开的但是组合式API是把这些东西全都写在一起了。
1 vue2的缺点
(1)使用vue2
Vue2版本对数据的拦截用的是Object.defineProperty,
可以监测到对象的变化。因为obj是有匹配getter和setter的 但是如果要给这个对象新添加属性就会发现新添加的属性是没有getter和setter的页面就无法显示出效果。 2使用vue3
---组合式api
就是把以前写在vue2中的data中的响应式数据写在setup里。并通过reactive()方法包裹数据使它成为响应式数据
之前写在vue2中的methods里面的方法也都写在setup里面。
---数据的响应
vue2使用的是defineProperty当有数组的时候无法为数组里面的每一项匹配getter和setter
let m {a:1,b:2,arr:[a,b,c]
}
let o {}
Object.keys(m).forEach((key){Object.defineProperty(o,key,{get(){return m[key]}set(){console.log(修改了)}})
}) 当我们修改数组的第0项数据是改变了但是由于没有匹配set方法并不能监测到触发不了函数
o.arr[0] xxx 所以vue2的监听原理就是通过把我们传进去的数据对象匹配了get和set方法当数据修改的时候触发了get和set方法从而去刷新页面但是对象深层和数组深层由于还没匹配get和set方法数据修改了但是并没有触发set方法没办法去刷新页面对于对象深层和数组深层必须使用递归。循环递归 Vue3使用Proxy
------reactive写法 也可以使用ref注意使用ref时需要通过.value访问
// 伪代码不是真正的实现
const myRef {_value: 0,get value() {track()return this._value},set value(newValue) {this._value newValuetrigger()}
}
