vue.js生命週期

時間  2019-12-08
標籤 vue.js vue 生命週期 欄目 JavaScript 简体版
原文   原文鏈接

1、Vue生命週期

vue實例中從建立到銷燬的過程，稱之爲生命週期，共有八個階段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命週期</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript"> window.onload = function(){ new Vue({ el:'#itany', data:{ msg:'你好啊' }, methods:{ update(){ this.msg='歡迎'; }, destroy(){ this.$destroy(); } }, beforeCreate(){ alert('組件實例剛剛建立，還未進行數據的觀測和事件的配置'); }, create(){ alert('組件實例已經建立完成，而且已經進行數據的觀測和事件配置'); }, beforeMount(){ alert('模板編譯以前，尚未掛載'); }, mounted(){ alert('模板編譯以後，已經掛載,此時纔會渲染頁面，才能看到頁面上數據的展現'); }, beforeUpdate(){ alert('組件數據更新以前'); }, updated(){ alert('組件更新以後'); }, beforeDestroy(){ alert('組件銷燬以前'); }, destroyed(){ alert('組件銷燬以後'); } }) } </script>
  </head>
  <body>
<div id="itany">
    {{msg}}
<button @click="update">點擊</button>
<button @click="destroy">點擊銷燬</button>
</div>
</body>
</html>
複製代碼



2、 計算屬性

1.基本用法

計算屬性也是用來存儲數據的，可是有如下幾個特色。
       a.數據能夠進行邏輯處理操做的
       b.能夠對計算屬性中的數據進行監視 
複製代碼

2.計算屬性 vs 方法

將計算屬性的get函數定義爲一個方法也能夠實現相似的功能
    區別：
       a.計算屬性是基於它的依賴進行更新的，只有在相關依賴發生改變時才能更新變化
        b.計算屬性是緩存的，只有相關依賴沒有改變，屢次訪問計算屬性獲得的值是以前緩存的計算結果，不會屢次執行。
複製代碼

3.get和set

計算屬性由兩部分組成，get和set,分別用來獲取計算屬性和設置計算屬性；
    默認只有get，若是須要set,要本身添加。
    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="UTF-8">
<title>計算屬性</title>
<script type="text/javascript" src="js/vue.min.js"></script>
    </head>
    <body>
<div id="itany">
    {{msg}}
    <br>
    {{msg2}}
    <br>
    <!-- 對數據進行處理再顯示 -->
    {{msg.split('').reverse().join('')}}
    <br>
    {{msg3}}
    <br>
    <button @click="changemsg">修改msg值</button>
    <br>
    {{num1}}
    <br>
    num2:
    {{num2}}
    <br>
    {{getnum2()}}

    <br>
    <button onclick="a()">測試</button>
    <br>
    <button @click="change()">修改計算屬性</button>
</div>
    </body>
    </html>
     <script type="text/javascript"> var vm = new Vue({ el:'#itany', data:{ msg:'weloome to itany', num1:7 }, computed:{ msg2:function(){ return '歡迎來到北京' }, msg3:function(){ return this.msg.split('').reverse().join(''); }, // num2:function(){ // console.log(new Date()); // return this.num1-1; // } num2:{ get:function(){ console.log(new Date()); return this.num1-1; }, set:function(val){ // console.log('修改值'); this.num1 = 1111; } } }, methods:{ changemsg(){ // this.msg = 'i love you'; this.num1 = 666; }, getnum2(){ console.log(new Date()); return this.num1-1; }, change(){ this.num2=11; } } }) function a(){ setInterval(function(){ // console.log(vm.num2); console.log(vm.getnum2()) },1000) } </script>
複製代碼

3、vue實例的屬性和方法

1.屬性

vm.$el
   vm.$date
   vm.$options
複製代碼

2.方法

vm.$mount();
  vm.$destroy();
  vm.$nextTick();
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
    {{msg}}
    <h2 ref="hh">標題：{{name}}</h2>
    <h2 ref="hello">你好1</h2>
    <h2 ref="world">你好2</h2>
</div>

<script type="text/javascript"> // var vm = new Vue({ // // el:'#itany', // // name:'tom', // // age:24, // // show:function(){ // // console.log('show'); // // }, // data:{ // msg:'welcome to itany' // } // }) // 屬性 // vm.屬性名 獲取data中的屬性 // console.log(vm.msg); // vm.$el 獲取vue實例關聯的選擇器 // console.log(vm.$el); 是DOM對象 // vm.$el.style.color='red'; // vm.$data //獲取數據對象data // console.log(vm.$data.msg); // vm.$options // // console.log(vm.$options.name); // console.log(vm.$options.age); // vm.$options.show(); // vm.$refs //獲取頁面中全部添加屬性的元素 // console.log(vm.$refs.hello); // console.log(vm.$refs.world); // vm.$refs.hello.style.color = 'red'; // 方法 // vm.$mount //手動的掛載vue實例 // vm.$mount('#itany'); var vm = new Vue({ data:{ msg:'11', name:'tom' } }).$mount('#itany'); // vm.$destroy() 銷燬實例的 // vm.$destroy(); // console.log(vm.msg); //vm.nextTick() 在DOM更新完成以後 再執行回調函數 通常在修改數據以後使用該方法，以便獲取更新後的DOM // 修改數據 vm.name = "222333"; // DOM還沒更新完 view實現響應式並非數據發生改變以後 dom當即變化 須要按照必定的策略進行dom更新 // console.log(vm.$refs.hh.textContent); // console.log(vm.$refs.hello); vm.$nextTick(function(){ // DOM更新完成了 更新完成後 執行此代碼 console.log(vm.$refs.hh.textContent); }) </script>
</body>
</html>
  vm.$set();
  vm.$delete();
  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
    <button @click="doUpdate">修改屬性</button>
    <button @click="doAdd">添加屬性</button>
    <button @click="doDelete()">刪除屬性</button>
    <div>{{user.name}}</div>
    <div>{{user.age}}</div>
</div>
<script type="text/javascript"> var vm = new Vue({ el:'#itany', data:{ user:{ id:'1001', name:"tom", age:'1' } }, methods:{ doUpdate(){ this.user.name='tom1'; }, doAdd(){ // this.user.age = 25; //經過普通方式爲對象添加屬性時vue沒法實時的監視的 // this.$set(this.user,'age',18); //經過vue實例的$set方法爲對象添加屬性，能夠實時的監視 // Vue.set(this.user,'age',28); //全局的寫法 if(this.user.age){ ++this.user.age; }else{ Vue.set(this.user,'age',46); } console.log(this.user); }, doDelete(){ if(this.user.age){ //delete.this.user.age;//無效 Vue.delete(this.user,'age'); }else{ } } } }) </script>
</body>
</html>
  vm.$watch();
  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>監視數據的變化，使用$watch</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#itany', data:{ name:'tom', age:'23', user:{ id:'1001', name:'uu' } }, // 方式2 使用vue實例提供的watch方法 watch:{ age:(newVal,oldVal) => { console.log('name被修改了old:'+oldVal); console.log('name被修改了new:'+newVal); }, user:{ handler:(newVal,oldVal)=>{ console.log('user被修改了old:'+oldVal.name); console.log('user被修改了new:'+newVal.name); }, deep:true //深度監視 //當對象的屬性發生變化時候 也會監視 } } }) //方式1：使用vue實例提供的$watch()方法 // vm.$watch('name',function(newVal,oldVal){ // console.log('name被修改了old:'+oldVal); // console.log('name被修改了new:'+newVal); // }) } </script>
    </head>
    <body>
<div id="itany">
    <input type="text" name="" v-model="name">
    <h1>{{name}}</h1>
    <br>
    <input type="text" name="" v-model="age">
    <h1>{{age}}</h1>
    <br>
    <input type="text" name="" v-model="user.name">
    {{user.name}}
</div>
  </body>
  </html>複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程