vue的基本指令 原理以及相关组件小解

 

先来一段代码

Object.defineProperty
let obj = {
  a:10
}
let a = 10;
Object.defineProperty(obj,'a',{
  get(){
    // 拦截了 对于 obj对象a属性 获取的操作
    return a;
  },
  set(val){
    // 拦截对于obj对象a 赋值的操作
    a = val;
  }
})
obj.a = 20;
 

//new一个 vue实例
  data:{
    a:{
      a:{
        b:{}
      }
    }
  }

 vue 自动遍历（递归）,data属性，将所有的 属性都 放到 getter/setter（池），设置 任意一个数据，对于setter就会拦截到，通知 watcher 自动去调用函数 render,生成 虚拟dom,跟上一次 已经缓存的虚拟dom进行比较（diff算法），得到最优渲染方案，尽量较少dom操作

  问题？

    1，对象，  对象如果是 动态添加的 监听不了 （数据变化不会刷新）

    2，数组  arr[下标]=值   arr.length = newLength

      Vue.set()

      this.$set(对象,属性,值)

      this.$set(数组,下标,值)

 

## 表单修饰符 修饰v-model

+ lazy

  将 v-model 由原来 input事件改为 change事件触发

+ number

  将v-model绑定的值，自动过滤成数字（按照parseFloat 顺序解析）（如果需要开头就是非数字字符，失去功能）

+ trim

  去除开头结尾空格

 

 

## ref  方便获取dom

 

//vue 尽量不要去操作dom，以数据驱动
<div ref="box">
<p ref="op">
 

//实例  this.$refs
      {
        box:div, //div这个dom对象
        op: p //p这个dom对象
      }
    this.$refs['box']
    this.$refs.box

 

## 侦听器 （监控 数据变化，数据变化时，回调自动触发）

新增 watch属性

什么时候用： 需要 监听一个数据变化，当这个数据变化时，我需要做其他的操作

 

新增 watch属性

l

et vm = new Vue({
  el:'xx',
  data:{
    msg:"a",
    obj:{
      a:10,
      b:20
    }
  },
  watch:{
    // 监听基本数据类型
    msg(newVal,oldVal){
 

    },
    // 监听对象属性
    'obj.a'(newVal,oldVal){
 

    },
    // 监听对象
    obj:{
      handler(newVal,oldVal){
 

      },
      deep:true //深度监听
    }
  }
})

 

## 计算属性

语法：

  新增 computed属性

  {
    data:{
      msg:'hello world'
    },
    computed:{
      msg2(){ // 写法是 方法 编译到实例上  是和 data中的属性一样的 值（不是函数）
        return this.msg.split('').reverse().join('');
      }
    }
  }

 

  注意：

    计算属性  名字 不能和 data（methods）中 已存在的 属性  重名

    计算不要去修改 计算属性的值  应该去修改 计算属性依赖的值

 

  如果需要修改计算属性

  计算属性 需要 使用 get和set的写法

 

 {
    data:{
      msg:'hello world'
    },
    computed:{
      msg2:{
        get(){
          return this.msg.split('').reverse().join('');
        },
        set(val){
           // 每一次修改  计算属性时，set触发，同时，修改的值，通过val传入
           this.msg = val;
        }
      }
    }
  }

 

## 组件

理解网页上 独立 区域（每一个标签都可以理解为是一个组件）

vue组件  组件 也是 Vue的实例（不是显式new Vue）（new Vue创建实例），实例有的方法组件都有

 

如何创建组件

  取决这个组件定义的哪里

  1:全局组件

    在任意其他的组件中 都可以使用

    

Vue.component(组件名,{
      template: 指定当前组件的 视图
      data,
      methods,
      watch,
      computed
    })
    eg:
       let CommonHead = {
        template:`
          <div>
            <h1>我是公共的头部{{title}}</h1>
            <h2>我是组件的副标题</h2>
            {{ msg }}
            {{ msg2 }}
            <button @click="change">改变title</button>
          </div>
        `,
        data(){
          return {
            title:"我是标题",
            msg:'hello world'
          }
        },
        methods:{
          change(){
            this.title = "我是另一个标题"
          }
        },
        computed:{
          msg2(){
            return this.msg.split('').reverse().join('')
          }
        }
 

      }
      // Vue.component('CommonHead',CommonHead);
      Vue.component('common-head',CommonHead);

 

  2:局部组件

    在其他实例的 components属性中注册

   

 let SubHead = {
      template:`
        <div>
          我是局部组件
        </div>
      `
    }
    let CommonHead = {
      template:`
        <div>
          <h1>我是公共的头部</h1>
          <sub-head></sub-head>
        </div>
      `, 
      components:{
        SubHead
      }
    }

 

  注意：

    1，组件的data属性必须是 函数 返回 对象(组件 需要复用，如果直接是对象，那么多次使用，使用的是同一个对象，)，函数返回对象（闭包），让 组件在每一次使用的时候，都一个独立空间

    2，组件的template 必须，只有一个根元素

    3，每个组件都有自己的作用域（data中数据只能在自己的template渲染，自己template中绑定方法，只能是自己这个组件methods中的）