Vue實例 實例方法與屬性

vue實例 選項對象 實例屬性與方法

1 創建vue實例：

vue實例的創建：一般通過new關鍵字的方式來創建，構造函數的參數列表需要傳入一個選項對象

var vm = new Vue(paramObj);

1.1 vue實例的選項對象

創建一個vue實例時，需要傳入一個選項對象，這個對象里面有如下幾個常見的屬性

el

1. 是根實例的特有屬性,代表根元素
2. 提供一個頁面上的DOM對象作為Vue實例的掛載目標.可以是選擇器或者或DOM元素實例
3. 可以通過vm.$el訪問
4. 當el和template共同存在時，el會被template覆蓋

    <div id="app">{{text}}</div>
    <script>
        var vm = new Vue({
            el:"#app",
            template:`<span>template text</span>`,
            data:{
                text:"text"
            }
        });
    </script>

template

1. 一個字符串模板，可以是選擇器或包含html內容的字符串，也可以是<script type="text/template">的包含內容
2. DOM中模板標簽之間的內容可以用插槽引入

data

1. data對象中的屬性是響應式的，直接向vm實例設置屬性不是響應式的
2. data的響應性可以被Object.freeze()打斷
3. data屬性的使用：

• Vue實例的函數中：使用this.prop調用(methods,computed的this自動綁定為vue實例)
• 標簽內：通過表達式{{porp}}訪問
• 標簽上：通過綁定調用:[prop]="prop"

    <div id="app" :[prop]="prop">{{prop}}</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                prop:"mytext"
            }
        });
    </script>

computed

為什么要有computed屬性而不直接在模板表達式里計算？
為了將復雜邏輯從模板計算中解脫出來，模板設計的初衷是簡單計算和數據顯示，在模板中進行過於繁瑣的計算會降低代碼的可維護性。

1. computed主要用於根據已有屬性生成新的屬性.當然不根據已有屬性生成也是可行的,不過一般不建議這么做，不符合語義，像這種情況放入data是更好的選擇
2. computed是基於響應式依賴進行緩存的。也就是說，如果一個計算屬性的依賴屬性沒有發生變化，那么重復訪問此屬性，不會另外進行編譯和計算，而是會直接從緩存里讀取該屬性。但也因為緩存，使得重復讀取計算屬性中的new Date()時，不會更新
3. computed中this指向VM實例，因此可以通過this訪問data中的屬性
4. computed默認只含有get方法,當然我們也可以自己寫入set方法

<div id="app" :[prop]="personMsg">{{personMsg}}</div>
<script>
    var vm = new Vue({
        el: "#app",
        prop:"text",
        person:{
            name:"bugger",
            age:1024
        }
    },
    computed: {
        //基於prop屬生成屬性
        sliceText() {
            //依賴屬性prop不變化，這里只會打印一次
            //會從緩存中直接讀取而不是編譯執行函數代碼再返回一次
            console.log("slice...");
            return this.prop.slice(0, 1);
        },
        personMsg:{
            get(){
                return this.person.name+":"+this.person.age;
            },
            set(cur){
                console.log("setter:",cur);
                this.person.name = cur.name;
                this.person.age = cur.age;
            }
        }
    },
    created() {
        setInterval(() => {
            console.log(this.sliceText);
        }, 1000);
    }
});
</script>

methods

1. 與computed一樣,methods中的 this 自動綁定為 Vue 實例
2. 與computed不同的是,methods不存在緩存,每次調用都編譯執行函數代碼，methods不能像computed那樣使用get set
3. 在表達式中可以通過調用方法,可以達到和調用computed中屬性一樣的顯示效果
4. 一般用於設置事件回調函數

<div id="app" :[prop]="sliceText()">{{sliceText()}}</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            prop: "text",
        },
        methods: {
            sliceText() {
                //只要一執行就調用
                console.log("slice...");
                return this.prop.slice(0, 1);
            },
        },
        created() {
            setInterval(() => {
                this.sliceText();
            }, 1000);
        }
    });
</script>

watch

1. 主要用於監聽vue實例已有屬性的變化,對於不存在的屬性無法起到監聽作用
2. watch可以在參數列表拿到變化的前一個對象和變化之后的新對象
3. watch可以檢測對象深層次屬性的變化以及設置回調函數是否立即觸發

<div id="app">
    <div>
        {{fullname}}-{{fullname}}
    </div>
    <hr>
    <div>
        {{getFullName()}}-{{getFullName()}}
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            firstname: "aaa",
            lastname: "bbb",
            person: {
                pName: "fighter",
                age: 22
            }
        },
        computed: {
            //計算屬性會有緩存，這里只打印一次
            fullname() {
                console.log("computed...");
                return this.firstname + this.lastname;
            },

            fullname: {
                get() {
                    return this.firstname + this.lastname;
                },
                set(name) {
                    console.log("computed...");
                    this.lastname = name;
                }
            }
        },
        methods: {
            //每次調用都會執行，這里打印兩次
            getFullName() {
                console.log("method....");
                return this.firstname + this.lastname;
            }
        },
        mounted() {
            //只要這里面的值修改，computed里面的值也會跟着修改
            setTimeout(() => this.lastname = "ccc", 3000)
        },
        //監聽data數據的變化
        watch: {
            //監聽屬性
            lastname(prev, cur) {
                console.log(prev, cur);
            },
            //監聽對象,監聽對象內部值，設置deep為true
            person: {
                handler() {
                    console.log("person change...");
                },
                //對象內部值的變化，數組的變化不需要這么做
                deep: true,
                //設置為true之后回調函數會立即觸發
                immediate: true
            }
        }
    })
</script>

props

1.2 vue實例的屬性對象

Vue實例對外提供了一些有用的實例屬性與方法,用前綴$+屬性名/方法名表示,以便於和用戶定義屬性區分開

屬性:

• vm.$el:根實例的掛載DOM結點
• vm.$parent:當前實例的父實例
• vm.$children:當前實例的子實例
• vm.$root:組件樹的根實例,如果沒有父實例,vm.$root指向自己
• vm.$refs:注冊過 ref 特性 的所有 DOM 元素和組件實例
• vm.$data:指向實例的data屬性
• vm.$props:指向當前組件的props對象屬性
• vm.$watch:指向實例的watch方法
• vm.$set:這個方法給實例設置的屬性是響應式的.直接設置vm.prop不是響應式的
• vm.$mount:這個方法等同於el屬性,都是給vue實例掛載DOM結點，底層實現一樣
• vm.$nextTick:DOM完成更新后，自動執行，調用nextTick中的回調函數

1.3 vue實例的方法 生命周期 鈎子函數

參考我的另一篇博客Vue生命周期