Tracy 小笔记 Vue - Vue 对象

Vue 对象

• const vue = new Vue(options);
• el
  • 类型：String | HtmlElement
  • 作用： 挂载对象，决定之后Vue 对象会管理哪个 Dom
• template: `当同时有 el 和 tempalte 的时候这里写的 html code 会替换 el 对应的整个 Dom 元素`
• data
  • 类型: Object | Function
  • 在组件当中 data 必须是一个函数，而不能用 object
  • 作用： Vue 实例对象的数据对象
• methods

  Tips:
  方法和函数的区别
  方法： methods，存在在一个类里。 方法都是和实例挂钩的。
  函数： function, 单独存在

  • 类型： {{key: string}：Function}
  • 作用： 事件调用的函数。 定义一些 Vue 的方法， 可以在其他地方调用，也可以在指令中调用
• computed (计算机属性)
  • 计算 data 里的值， 定义的是一些函数，这些函数一般不加一些动词。 比如叫 fullName 而不是叫 getFullName。 是一些属性的名字一样的函数
  • 它在多次调用的时候，其实只执行一次也就是它会有缓存，而 method 调用几次就执行几次。 所以计算机属性是节省时间的，性能高的。
  • 它的本质就是一个属性，所以调用的时候不加括号
    {{fullName}}
    computed:{ fullName:function(){return this.firstName + " " + this.lastName;} }
    相当于
    fullName:{
    set:function(newValue){}, //计算机属性一般没有set 方法，是只读属性，所以set 方法一般都是被省略
    get:function(){return this.firstName + " " + this.lastName;}} //只有get 方法，所以一般get 也省略了，像上面一样
• filters (过滤器) 格式化变量的显示
  filters:{showPrice(price){return '¥' + price.toFixed(2);}}
  使用： "变量 | 过滤器" 即可，such as {{totalPrice | showPrice}}
• watch：{变量名(newvalue, oldvalue){}}
  变量发生变化的时候触发该事件
  这里的变量指的是data 里的值引用的简单数据。
  如果想监听对象，那么需要设置watch里的这个变量名+深度监听
  也可以在生命周期函数中监听，在生命周期函数中监听的时候也可以在这里解除监听
   

  data(){
      return {
          info:{name:"Tracy",age:18},
          info2:{name:"aa", age:19}
      }
  },
  watch:{
      info:{
          handler:function(newInfo, oldInfo){
              ...
          },
          deep:true, //深度监听
          immediate:true //立即执行(无论值是否变化，一定会执行一次 handler 函数)
      },
      "info2.name":function()(newName, oldName){
              ... //只监听 info2 里的 name 属性
      },
  
  },
  created(){
      //在生命周期函数中现绑定
      const unwatch = this.$watch("info", function(newInfo, oldInfo){
          ...
      },{
          deep: true,
          immediate: true
      })
  
      //解绑
      unwatch();
  }
  

• Vue 对象的生命周期 (钩子函数 hook, 就是回调函数)
  • 当 new Vue() 的时候，生命周期就开始了
  • Git vue 源码，注意 vue 是时时更新的，所以我们要看打 tag 的 release 的版本，而不要看测试版本
  • 回调函数值在 vue 对象里直接写的方法。 如：
    const vue = new Vue({created:function(){console.log('create');}});
  • beforeCreate :
  • created :
    通常放入一些网络请求，把请求到的数据放入到 data 里，然后再把 data 里的数据展示在 Dom 上
  • mounted : 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。但是并不是说所有 html 渲染完毕再调用。
    mounted(){document.title = "";}
    这个方法里可以改 browser title, 因为其他方法可能获取不到 document 对象
    也可以把修改 browser title 放在 watch 里，监听要显示的变量
    
    如果想要在确保 html 都渲染完毕的时候再调用的话，在 mounted 里调用 this.$nextTick(() =>{}) //但是图片可能依然没有加载完毕
  • activated/deacticated : 组件激活/失效的时候
  • updated:只要有数据变化，就会调用
• components:{ cpn : {template : "#aaa"}} 注册局部组件