Open dave-wind opened 1 year ago
1.以前vue2 是选项式 要引用一个响应式 要不整个vue引入; 现在组合api 可以单独引入 比如 直接 引用 reactive包 2.打包方面: 以前vue2 很多带的方法 比如 nexttick keep-alive 全局组件 都会打包进去; vue3 采用按需倒入 treeshaking那种 3. vue3还可以自定义渲染器 4. vue3 依旧是声明式, 不需要去关心内部一下api实现, 整个渲染逻辑交给vue去做
ref 和 reactive vue3 ref 和 reactive 区别 ref 一般用来处理 响应式非引用类型, 也可以传对象; 如果是对象 内部借用的也是 reactive去实现响应式 reactive就是 定义对象的 深度key都可以做到响应式; 而且只能传入对象; 因为proxy只支持 对象格式 effect // 默认会执行一次; 然后响应式数据变了 就又会重新执行 effect(()=>{ }) proxy 配合 Reflect的作用 var person = { alias: 'dave', get name() { return this.alias + 'wind' } };
ref 和 reactive
vue3 ref 和 reactive 区别 ref 一般用来处理 响应式非引用类型, 也可以传对象; 如果是对象 内部借用的也是 reactive去实现响应式 reactive就是 定义对象的 深度key都可以做到响应式; 而且只能传入对象; 因为proxy只支持 对象格式
effect
// 默认会执行一次; 然后响应式数据变了 就又会重新执行 effect(()=>{ })
proxy 配合 Reflect的作用
var person = { alias: 'dave', get name() { return this.alias + 'wind' } };
var proxy = new Proxy(person, { get(target, key, receiver) { // console.log("记录属性使用哪个effect----", key) // return target[key] return Reflect.get(target, key, receiver); // receiver 代表proxy 可以改变属性this指向 }, set(target, key, value, receiver) { console.log("通知effect重新执行----") // target[key] = value return Reflect.set(target, key, value, receiver) } });
proxy.name; // 这样就可以 劫持到 name 和 alias
区别
var proxy = new Proxy(person, { get(target, key, receiver) { // console.log("记录属性使用哪个effect----", key) // return target[key] return Reflect.get(target, key, receiver); // receiver 代表proxy 可以改变属性this指向 }, set(target, key, value, receiver) { console.log("通知effect重新执行----") // target[key] = value return Reflect.set(target, key, value, receiver) } });
proxy.name; // 这样就可以 劫持到 name 和 alias