vue入门第三弹——vue实例及其生命周期

vue实例

创建一个新的vue实例：var vm=new Vue（{ //选项 }）其中vm变量名表示vue实例。
当一个vue实例被创建的时候，它会将data对象中的所有property加入到vue的响应式系统中，当这些property的值发生改变时，视图将会产生响应，匹配更新为新的值，但是这只是针对于实例被创建时就已经存在于data中的property。就比如通过vm来获取数据对象时，返回的是源数据中的对应的字段。

var data={a:1}
var vm=new Vue（{data：data}）
vm.a==data.a//true,同时设置property也会影响原始数据。
vm.b//对他的改动不会触发任何视图更新。

使用Object.freeze()会阻止修改现有的property，响应系统无法在追踪变化。

var obj={
	foo:"bar"
}
Object.freeze(obj)
new Vue({
	el:'#app',
	data:obj
})

实例前面加$符号，有助于与用户定义的property区分开来。

var vm = new Vue({
	el:'#app',
	data:data
})
vm.$data===data//true

实例生命周期

vue实例被创建的过程中会运行生命周期的钩子函数。给用户添加代码的机会。
实例的生命周期：
1.实例化对象new vue后进行初始化；
2.初始化事件和生命周期；
3.执行beforeCreate创建实例之前的钩子函数，它在数据观测和event、watcher事件配置之前被调用；
4.初始化注入；
5.执行created实例创建完成后的钩子函数，在这一步实例已经完成数据观测，属性和方法的运算，watch/event事件回调；
6.若是有el选项则继续，若是没有就使用vm.$mount()挂载模板；当vue实例没有el属性时，则该实例尚没有挂载到某个DOM中；
7.之后把data对象里的数据和vue语法声明的模板编译成浏览器可读的HTML；
8.编译完成的的HTML挂载到对应虚拟DOM时触发钩子函数beforeMount，这个时候页面没有内容，挂载的是个虚拟的DOM，这个时候相关的render函数首次被调用；
9.将编译好的HTML替换掉el属性所指向的DOM；
10.编译好的HTML挂载到页面完成后执行的事件钩子mounted，此钩子函数中一般会做一些ajax请求获取数据进行数据初始化。el被新创建的vm. $el替换 这里要注意的是mounted在整个实例中只执行一次；
11.beforeUpdate数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，可以在这个钩子中进一步更改状态，这时不会触发重渲染。
12.updated数据更改导致的DOM重新渲染和打补丁，之后调用钩子函数，这时dom已经更新，可以执行dom的操作。
13.beforeDestroy实例销毁前调用，这里实例还有效。
14.destroyed vue实例销毁后调用，vue实例中所有东西解绑，事件监听移除，子实例销毁

整个过程中，实例对象只挂载一次，之后通过update可以多次进行页面渲染，但是不会再进行实例的挂载操作。

<template>
  <div id="app">
    <input type="text" v-model="ms"/>
    <p>{{ms}}</p>
    <h1>23</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
    ms:"123"
    }
  },
  beforeCreate() {
    console.log("组件初始化之前");
  },
    created() {
    console.log("组件初始化之后");
  },
    beforeMount() {
    console.log("组件挂载之前");
    },
    mounted() {
    console.log("组件挂载之后");
  },
  beforeUpdate() {
    console.log("组件更新之前");
  },
  updated() {
    console.log("组件更新之后");
  },
  beforeDestroy() {
    console.log("组件卸载之前");
  },
  destroyed() {
    console.log("组件卸载之后")
  }
  
}
</script>

<style>

</style>