csnan-CSDN博客

原创 Vue 实现复选框全选功能

巧妙利用 computed 计算属性实现复选框全选功能

2022-07-07 14:38:54 738 1

实现原理:通过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 1159

原创 Vue2.x 的响应式

实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。 // 源数据let person = { name:'张三', age:18}// 模拟Vue2中实现响应式// 只有 get 和 set 实..

2022-03-14 16:32:38 1645

原创用 JavaScript 递归算法写一个函数，输入 int 型，返回整数逆序后的字符串

如：输入整型 1234，返回字符串“4321”。要求必须使用递归函数调用， // 不能用全局变量，输入函数必须只有一个参。function test(num) { if(num <= 9){ return String(num) }else{ return String(num%10) + String(test(parseInt(num/10))) }}console.log(test(1234))...

2022-03-11 18:07:28 1326 1

原创 Vue3.0 的 ref 和 reactive对比

从定义数据角度对比： ref用来定义：基本类型数据。 reactive用来定义：对象（或数组）类型数据。备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。从原理角度对比： ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。 reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。从使用角度对比： ref定义的数据：操作数据需要.v

2022-03-10 23:14:41 349

原创 const 需要注意的一个点

const obj = {}obj. a = 1 // 正确obj = 1 // 错误

2022-03-10 22:48:05 87

原创理解 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 895

csnan的博客