![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
csnan
正在学习中的前端工程师...
展开
-
Vue 实现复选框全选功能
巧妙利用 computed 计算属性实现复选框全选功能原创 2022-07-07 14:38:54 · 698 阅读 · 1 评论 -
Vue3.0的响应式
实现原理: 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。 通过Reflect(反射): 对源对象的属性进行操作。 MDN文档中描述的Proxy与Reflect: Proxy:Proxy - JavaScript | MDN Reflect:Reflect - JavaScript | MDN // 源数据 let person = { name:'张三', age:18 } //模拟Vue3中实现响应原创 2022-03-14 16:55:26 · 1130 阅读 · 0 评论 -
Vue2.x 的响应式
实现原理: 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。 存在问题: 新增属性、删除属性, 界面不会更新。 直接通过下标修改数组, 界面不会自动更新。 // 源数据 let person = { name:'张三', age:18 } // 模拟Vue2中实现响应式 // 只有 get 和 set 实..原创 2022-03-14 16:32:38 · 1625 阅读 · 0 评论 -
Vue3.0 的 ref 和 reactive对比
从定义数据角度对比: ref用来定义:基本类型数据。 reactive用来定义:对象(或数组)类型数据。 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比: ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。 reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。 从使用角度对比: ref定义的数据:操作数据需要.v原创 2022-03-10 23:14:41 · 323 阅读 · 0 评论 -
理解 Vue3.0 里的 setup 函数
理解:Vue3.0中一个新的配置项,值为一个函数。 setup是所有Composition API(组合API)“ 表演的舞台 ”。 组件中所用到的:数据、方法等等,均要配置在setup中。 setup函数的两种返回值: 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!) 若返回一个渲染函数:则可以自定义渲染内容。(了解) 注意点: 尽量不要与Vue2.x配置混用 Vue2.x配置(data、methos、computed...)中可以访问到setup中的原创 2022-03-10 22:27:50 · 861 阅读 · 0 评论