vue2的双向数据绑定原理and 自定义指令

object.defineProperty()

概念:

(1)Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象.

var obj = {}
 
Object.defineProperty(obj, 'name', {
  value:'科比'
})
 
console.log(obj.name)  //科比

(2)Object.definProperty()方法可以设置额外隐藏的属性使用这些属性能够使对象更加自由的被定义

var obj = {}
 
Object.defineProperty(obj, 'name', {
  value:'科比',
  //是否可写
  writable: false 
})
 
Object.defineProperty(obj, 'number', {
  value:24,
  //是否可枚举
  enumerable: false 
})
 
//修改属性报错
obj.name = "库里"  //Cannot assign to read only property 'name' of object '#<Object>'
console.log(obj.name)  

 (3)Object.definProperty()方法的get()和set()

var obj = {}
var com;  //设置变量周转
Object.defineProperty(obj , 'name' , {
  get(){
    console.log('访问obj.name属性触发')
    return com
  },
  set(newValue) {
    console.log('修改obj.name属性触发' , newValue)
    com = newValue
  }
})
obj.name  //访问属性
console.log(obj.name)  //乔丹
obj.name = "科比"  //修改属性科比
console.log(obj.name)  //最后控制台打印 科比

 1.vue会监视data中所有层次的数据

2.如何监测对象中的数据

通过setter实现监视，且要在new Vue时就传入要监测的数据

（1）对象中后追加的属性，vue默认不做响应式处理

（2）如需给后添加的属性做响应式，请使用如下API：

vue.set(target,propertyName/index,value)或

vm.$set(targe,propertyName/index,value)

this.$set(this.tableSetting, 'data', res.data)

 3.如何监测数组中的数据

通过包裹数组更新元素的方法实现，本质就是做了两件事：

（1）调用原生对应的方法对数组进行更新

（2）重新解析模板，进而更新页面

4.在vue中修改数组中的某个元素一定要用如下方法：

(1).使用这些API：push、pop、shift、unshift、sort、splice、reverse

(2).Vue.set()或vm.$set()

注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

 数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）

let obj = {x:100}
let obj2 = {y:200}
object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})

 obj2可以改变obj里x的值

1.vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性都指定一个getter/setter，在getter/setter内部去操作data中对应的属性

数据劫持 

1. 数据劫持也可称作数据代理，字面上是劫持到某个属性的变化，去做其他的操作
2. 在vue中的数据劫持，实际上是劫持到vm上属性的变化，去重新解析模板，更新页面，实现响应式效果

 

 MVVM模型

1.M：模型（Model）：data中的数据

2.V：视图（View）：模板代码

3.VM：视图模型（ViewModel）：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上

2.vm身上所有的属性及vue原型上所有属性，在vue模板({{ }})中都可以直接使用

<div v-once>Message ：{{msg}}</div>
加上v-once修饰之后，我们的点击修改值的方法，方法能够生效，Vue实例中的值也会改变，但是它不会重新渲染。

v-model用来收集表单数据，用于复选框时需注意：用于复选框时存在特殊情况，当我们双绑的属性初始赋值为数组时，是收集value值，但如果初始值是" "，收集的就是checked值了。

v-model的修饰符，使用方式例：v-model.lazy。

lazy：当表单失去焦点时才收集数据，使得性能更好。

trim：去除内容的空格。

number：把内容转化为有效的数字。

vue有两种数据绑定的方式：

1.单向绑定（v-bind）：数据只能从data流向页面

2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

备注：双向绑定一般应用在表单类元素上（如：input、select）

vue指令：

内置指令

v-bind：单向数据绑定，v-model：双向数据绑定，v-on：绑定事件监听，v-for：遍历数组对象字符串，v-if/v-else/v-show：条件渲染 ，v-text：向其所在的节点中渲染文本内容，v-text会替换掉节点中的内容，插值语法（{{xx}}）不会

<div v-text = "name"></div>
<script>
    data:{
        name:'123'
    }
</script>

自定义指令：

局部自定义指令

<div id="root">
<h2>当前的n值是：<span v-text="n"></span></h2>
<h2>当前的n值是：<span v-big="n"></span></h2>
<button @click="n++">点我n+1<button>
</div>
<script>
data:{
    n:1
},
directives:{
//big函数何时调用？1.指令与元素成功绑定时（一开始）。2.指令所在模板被重新解析时
    big(element,binding){
        console.log(element)//<span></span>真实dom元素
        console.log(binding)//value值n
        element.innerText = binding.value*10
    },
    fbind:{
//钩子函数
        //指令与元素成功绑定时（一开始）
        bind(element,binding){},
        //指令所在元素被插入页面时
        inserted(element,binding){},
        //指令所在模板被重新解析时
        update(element,binding){}
    }
}
</script>

 全局自定义指令

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Vue.directive('focus', function(el){
  // 当绑定元素插入到 DOM 中。
    // 聚焦元素
    el.focus()
})