Vue learning - instance (2) instance method

1. vm.$mount: Usage: If a Vue instance does not receive the el option when instantiated, it is in an "unmounted" state with no associated DOM element. An unmounted instance can be mounted manually using vm.$mount(). If no elementOrSelector parameter is provided, the template will be rendered as an element outside the document, and you must use the native DOM API to insert it into the document. This method returns the instance itself, so other instance methods can be chained.
   < body >

   < h1 >Instance Methods</ h1 >

   < div id = "app" >

   {{message}}

   < div class = "text" >{{message}}</ div >

   </ div >

   < script >

   var abc = View. extend ({

   template: "<p>{{message}}</p>",

   data: function () {

   return {

   message: "Hello my Girl!"

   }

   }

   })

   new abc(). $mount( "#app"); //将abc挂载到app上

   </ script>

   </ body>
   
   
2. vm.$destroy()：完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。这个方法会触发 beforeDestroy 和 destroyed 的钩子。在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

   < p>

   < button onclick= "xiezai()">卸载</ button>

   </ p>

   < div id= "app">

   {{message}}

   < div class= "text">{{message}}</ div>

   </ div>

   
   

   < script>

   var abc = Vue. extend({

   template: "<p>{{message}}</p>",

   data: function () {

   return {

   message: "Hello my Girl!"

   }

   },

   destroyed: function () {

   console. log( "销毁之后");

   }

   })

   var vm = new abc(). $mount( "#app"); //将abc挂载到app上并且命名为vm

   function xiezai() {

   vm. $destroy();

   }

   </ script>
3. vm.$forceUpdate()： 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

   < p>

   < button onclick= "update()">刷新</ button>

   </ p>

   < div id= "app">

   {{message}}

   </ div>

   < script>

   var abc = Vue. extend({

   template: "<p>{{message}}</p>",

   data: function () {

   return {

   message: "Hello my Girl!"

   }

   },

   updated: function () {

   console. log( "被更新之后");

   }

   })

   
   

   function update() {

   vm. $forceUpdate();

   }

   </ script>
4. vm.$nextTick：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
   < p>

   < button onclick= "xiugai()">修改</ button>

   </ p>

   < div id= "app">

   {{message}}

   </ div>

   < script>

   var abc = Vue. extend({

   template: "<p>{{message}}</p>",

   data: function () {

   return {

   message: "Hello my Girl!"

   }

   },

   destroyed: function () {

   console. log( "销毁之后");

   },

   updated: function () {

   console. log( "被更新之后");

   }

   });

   var vm = new abc(). $mount( "#app");

   function xiugai() {

   vm. $nextTick( function () {

   console. log( "更新完后被调用");

   });

   }