vue 是一个渐进式的 javascript 框架
双向绑定通过对 数据的 劫持 结合 发布订阅模式的方法来实现双向绑定;即是 数据发生变化, 视图跟着发生变化; 数据与视图是同步进行
vue 3之前是依靠的 Object.defineProperty() 这个语法 ; 该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty() 这个方法里面有三个参数, 分别为
Object.defineProperty(obj , prop , descriptor)
obj: 要定义属性的对象
prop: 要定义修改的属性的名称或 Symbol
descriptor:要定义或修改的属性描述符
返回值: 被传递给函数的对象。
(注 :在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty 是定义key为Symbol的属性的方法之一。)
Object.definedProperty 的基本使用
let obj = { name:'小明" ; age:"15" }; let temp = obj.age;
Object.defineProperty( obj , 'age',{
get(){ console.log('你进行了对小明年龄的劫持') return temp };
set(){ console.log('你进行了小明年龄的西瓜') return temp = value}
})
console.log(obj.age) // 进行了obj.age 的获取, 返回了 temp 的值
obj.age = 20 // 进行了obj.age的设置, 设置了temp的值, 改成了 20
console.log(obj.age) // 进行了 obj.age 的获取, 返回了 temp 的值 20
v-model 指令的第三方实现
v-model 其实是vue 提供的一个语法糖(简易方法)
<input v-model="text" > 本质上就是 <input:value="text"@input="text=>$event.target.value> </input>
v-model 基础(可以看下)
进阶的看下这个大佬的
Vue之v-model 进阶 (有点深奥)