vue.js生命週期

itwangchen發表於2019-03-22
Vue.js

一、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>
複製程式碼


vue.js生命週期

二、 計算屬性

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>
複製程式碼

三、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>複製程式碼


相關文章