Vue学习总结

• 数据驱动

• 组件化

Vue

View就是DOM层，ViewModel就是通过new Vue()的实例对象，Model是原生js。当用户行为修改了DOM，ViewModel对修改的行为进行监听，监听到了后去更改Model层的数据，然后再通过ViewModel去改变View，从而达到自动同步。

• Object.defineProperty()函数
  借助get和set函数

//html //js
 var obj = {};    var inp = document.getElementById('inp');//obj表示被操作的对象，‘username’表示添加的属性，get和set函数在username属性获取或者改变值时自动调用。
    Object.defineProperty(obj, 'username', {        //控制台输入obj.username,自动调用get方法
        get: function() {           console.log(this._username)
        },        //控制台输入obj.username=0,自动调用set方法,set(0)
        set: function(val) {
            inp.value = val;            document.getElementById('sp').innerText = val;            this._username=val;
        }
    })
    inp.addEventListener('keyup', function(e) {
        obj.username = e.target.value;
    })

vue的生命周期就是从创建到销毁的过程中，在某个特定的时间点自动执行的函数，一共有8个生命周期函数。

• beforeCreate()

• created()

• beforeMount()

• mounted()

• beforeUpdate()

• updated()

• beforeDestry()

• destroyed()

来自官网

先看一段代码引用详解vue生命周期
，在浏览器中查看输出：

    
    
    
      
      
      
      
      
      
    
    
      
        {{message}}
      
    
    
    

控制台输出：

• 在beforeCreate和created钩子函数之间的生命周期
  初始化数据。created()时，data属性及其内部数据已到位。

  
  

• created钩子函数和beforeMount间的生命周期
  首先检测Vue实例中是否有el属性，本例中绑定的是’#app’，（没有就等待，直到有vm.$mount(el)被调用）如果有，那么继续查询实例中是否定义了template属性，如定义了模板属性，就把template编译到render函数中，否则就是用外部的html。
  beforeMount()函数执行时，dom中的占位符还没有被替换。
  

  
  

• beforeMount和mounted 钩子函数间的生命周期
  替换占位符，dom中的数据完全展示出来。

  
  

• Mounted
  dom元素和数据挂载绑定期间，如果更改数据，就会先后执行beforeupdate()和updated()

  
  

• destroyed
  当调用vm.$destroy()，将会先后执行beforeDestry()和 destroyed()

作者：fenerchen
链接：https://www.jianshu.com/p/9fe157c8e6b8