vue基础之数据代理，以及事务处理

Vue数据代理

优点：更加方便操作data中的数据。

定义：一个对象通过另一个对象（读/写）操作属性。

基本原理：通过 Object.defineProperty()方法把所有vm中的属性都添加到vm上，为每一个添加到vm的属性都指定一个getter,setter，

在getter,setter的内部去操作data中的对应的属性。

 //增加属性（对象，‘属性名’，{方法或者值}）
      Object.defineProperty(person,'age',{
      //基础用法
      value:19,
        //三个常用属性全部默认为false
        enumberable:true,  //设置为可以被科举  
        writable:true,  //设置为可以被修改
        configurable:true,  //设置为可以被删除
​
      })
      
  //修改属性
   let obj = {x:100}
   let obj1 = {y:200}
        Object.defineProperty(obj1,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x=value
            }
​
        })

Vue事物处理

vue实例中关键字methods:{ 函数，方法 }。

绑定事件使用 ：

1.v-on:click="XXX"

2.（简写）@click="XXX"

事件的回调需要配置在methods对象中，最终也会在自己定义的vue实例vm里面。

@click=“demo” 和@click=“demo（$event）”效果一样，但是前者不传参。

简单用法示例：

<button v-on:click="fun">点击查看(不传参)</button>
<button @click="fun1(6)">点我查看（简写以及传参)</button>

methods:{
       fun(event){
            alert('你在狗叫什么')
          },
       fun1(number){
          console.log(number)
          alert('我是主播别傻我')
                    }
         },
       

事物的修饰符：

基础的三个：

<!--修饰符可以连写-->
<!--1.阻止默认事件-->
<a href="http://www5.baidu.com/" @click.prevent="fun">有弹窗但是不跳转</a>
<a href="http://www5.baidu.com/" @click="fun">点我跳转百度</a>
​
    <!--2.阻止事件冒泡.====先执行了button再执行了div-->
    冒泡：
    <div class="demo1" @click="fun1">
       <button @click="fun1">点我查看提示</button>
    </div>
    不冒泡：
    <div class="demo2" @click="fun1">
         <button @click.stop="fun1">点我阻止冒泡</button>
    </div>
​
           <!--3.事件只触发一次-->
           <div class="demo3">
              <button @click.once="fun2">点我触发一回结束</button><br>
              <button @click="fun2">点我触发</button>
           </div>

其他的修饰符：

事件捕获capture：使用事件的捕获模式，eg.点击，松开......

事件只有当前元素为event.target才触发self

事件的默认为立即执行，无需等待事件回调执行完毕passive