解讀Vue實(shí)例的屬性及模板渲染

更新時(shí)間：2022年12月03日 15:58:32 作者：橘貓吃不胖～

這篇文章主要介紹了解讀Vue實(shí)例的屬性及模板渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1 概述

Vue.js是通過(guò)new Vue({...})來(lái)聲明一個(gè)實(shí)例的，在這個(gè)實(shí)例中包含了當(dāng)前頁(yè)面的HTML結(jié)構(gòu)、數(shù)據(jù)和事件。

Vue實(shí)例是MVVM模式中的ViewModel，實(shí)現(xiàn)了數(shù)據(jù)和視圖的雙向綁定。

在實(shí)例化時(shí)可以傳入一個(gè)選項(xiàng)對(duì)象，它包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子函數(shù)等選項(xiàng)。

2 el：與DOM元素綁定

el是element的簡(jiǎn)寫，用來(lái)和DOM元素進(jìn)行綁定，對(duì)應(yīng)的是DOM元素的id屬性值（類似id選擇器）。

用法如下：

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: "#xxx" // xxx為id名
    })
</script>

3 data：定義雙向綁定的數(shù)據(jù)

在Vue實(shí)例中初始化的data中的所有數(shù)據(jù)會(huì)自動(dòng)進(jìn)行監(jiān)聽綁定，可以使用兩個(gè)大括號(hào) {{}} 來(lái)綁定data中的數(shù)據(jù)。

用法如下：

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: "#xxx",
        data: {
        	健: 值
        }
    })
</script>

健為屬性的名稱，值為初始值。

示例代碼：

<div id="app">
    <h2>{{message}}</h2>
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "橘貓吃不胖"
        }
    })
</script>

如果在輸入框中輸入其他內(nèi)容，h2標(biāo)簽也會(huì)顯示該內(nèi)容，vue與h2標(biāo)簽的綁定是單向的，與input標(biāo)簽的綁定是雙向的。

注：data中的數(shù)據(jù)都是淺拷貝。這意味著，如果修改原來(lái)的對(duì)象也會(huì)改變data，從而觸發(fā)更新事件。

4 computed：計(jì)算屬性

computed是計(jì)算屬性，當(dāng)我們要用到的屬性不存在，需要通過(guò)已有屬性計(jì)算得來(lái)，這時(shí)使用計(jì)算屬性。computed底層借助了Object.defineproperty方法提供的getter和setter來(lái)實(shí)現(xiàn)。

使用方法可以跟data中的屬性一樣使用，注意用的時(shí)候不要加“()”。

它是data屬性的補(bǔ)充。在進(jìn)行數(shù)據(jù)綁定的時(shí)候，對(duì)數(shù)據(jù)要進(jìn)行一定的處理才能展示到HTML頁(yè)面上。

雖然Vue提供了非常好的表達(dá)式綁定方法，但是只能應(yīng)對(duì)低強(qiáng)度的需求。

用法如下：

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: "#xxx",
        computed: {
        	方法名: function () {}
        }
    })
</script>

例如，把一個(gè)日期按照規(guī)定格式進(jìn)行輸出，可能就需要對(duì)日期對(duì)象做一些格式化。

Vue提供的計(jì)算屬性（computed）允許開發(fā)者編寫一些方法，協(xié)助進(jìn)行綁定數(shù)據(jù)的操作。

<div id="app">
    <table>
        <tr>
            <td>姓名：</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>生日：</td>
            <td>{{getBirthday}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "橘貓吃不胖",
            birthday: 1014228510514 // 傳了一個(gè)毫秒數(shù)
        },
        computed: { // 計(jì)算屬性，對(duì)data中的數(shù)據(jù)進(jìn)行處理
            getBirthday: function () { // getBirthday就是表格中的{{getBirthday}}，其本質(zhì)是一個(gè)屬性
                let date = new Date(this.birthday);
                return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
            }
        }
    })
</script>

每一個(gè)計(jì)算屬性都包含一個(gè)getter和一個(gè)setter。

上面的示例是計(jì)算屬性的默認(rèn)用法，只是利用了getter來(lái)讀取。在需要時(shí)，也可以提供一個(gè)setter函數(shù)，當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)，就會(huì)觸發(fā)setter函數(shù)，執(zhí)行一些自定義的操作。

getter函數(shù)執(zhí)行的時(shí)機(jī)：
（1）初次讀取時(shí)會(huì)執(zhí)行一次
（2）當(dāng)依賴的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用

計(jì)算屬性computed優(yōu)勢(shì)：與methods實(shí)現(xiàn)相比，它的內(nèi)部有緩存機(jī)制，計(jì)算屬性只有在它相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值，效率更高，調(diào)試方便。

注意：
（1）計(jì)算屬性最終會(huì)出現(xiàn)在Vue實(shí)例vm上，直接讀取使用即可
（2）如果計(jì)算屬性要被修改，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生改變

示例：在輸入框中分別輸入姓和名，最后將全名顯示在頁(yè)面上，感受getter方法；在控制臺(tái)中修改全名，感受setter方法。

<div id="app">
    姓：<input type="text" v-model="xing"><br><br>
    名：<input type="text" v-model="ming"><br><br>
    你的姓名是：{{fullName}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            xing: "", // 初始值為空
            ming: ""
        },
        computed: {
            fullName: {
                get() {
                    return this.xing + "-" + this.ming; // 返回值為全名
                },
                set(value) {
                    let arr = value.split("-");
                    this.xing = arr[0];
                    this.ming = arr[1];
                }
            }
        }
    })
</script>

如下所示，在輸入框中輸入姓和名，會(huì)將全名顯示在下方。

如果在控制臺(tái)中修改全名，會(huì)修改掉輸入框中的值。

5 methods：定義Vue實(shí)例的方法

methods需要搭配v-on指令來(lái)監(jiān)聽DOM事件，我們?cè)?code>methods對(duì)象中定義方法，最終會(huì)在Vue實(shí)例上，其中的this會(huì)指向Vue的實(shí)例vm，因此其中配置的函數(shù)不可以使用箭頭函數(shù)，否則會(huì)改變this的指向。

用法如下：

<div id="xxx"></div>
<script>
    var vm = new Vue({
        el: '#xxx',
        methods: {
            方法名: function () { }
        }
    })
</script>

示例代碼：

<div id="app">
    <p>原始字符串："{{ message }}"</p>
    <p>反向字符串："{{ reversedMessage()}}"</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '橘貓吃不胖'
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

6 Vue中的三種模板

6.1 html模板

html模板：基于DOM的模板，模板都是可解析的有效的HTML插值
文本：使用{{ }}語(yǔ)法，作用：替換實(shí)例上的屬性值，當(dāng)值改變時(shí)，插值內(nèi)容處會(huì)自動(dòng)更新
原生的html：雙大括號(hào)輸出的是文本，不會(huì)解析html（想要解析html，可以使用指令v-html）
屬性：使用v-bind進(jìn)行綁定，可以響應(yīng)變化

    <div id="wrap">
        <p>你的名字是{{list.name}}</p>
    </div>
    <script>
        var list = {
            name: "donna",
            age: 20
        }
        var vm = new Vue({
            el: "#wrap",
            data: { list }
        });
    </script>

6.2 字符串模板

先定義字符串模板，然后在vue 的選項(xiàng)對(duì)象里面利用template綁定。字符串模板的優(yōu)先級(jí)會(huì)比html模板高，如果html和字符串模板中都有內(nèi)容，會(huì)用字符串模板里的內(nèi)容替換html模板。需要注意的是定義的字符串模板中根節(jié)點(diǎn)只能有一個(gè)。還有字符串用 ` 引起來(lái)是可以換行的。

示例代碼：

    <div id="app"></div>
    <script>
        let obj = {
            content: "橘貓吃不胖"
        }
        let str = `<div>Hello {{content}}</div>`;
        new Vue({
            el: "#app",
            data: obj,
            template: str
        })
    </script>

除了用變量定義模板字符串，還可以用script標(biāo)簽，給script 標(biāo)簽定義id，根節(jié)點(diǎn)只能有一個(gè)，將html結(jié)構(gòu)寫在一對(duì)script標(biāo)簽中，設(shè)置type=“x-template”，模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略。Vue實(shí)例的template屬性設(shè)置為給定的script標(biāo)簽

示例代碼：

    <div id="app"></div>
    <script type="x-template" id="test">
        <div>
            <p>姓名：{{obj.name}}</p>
        </div>
    </script>
    <script>
        let obj = {
            name: "張三"
        }
        new Vue({
            el: "#app",
            data: { obj },
            template: "#test"
        })
    </script>

6.3 render函數(shù)模板

render(createElement){ 
	createElement(標(biāo)簽名,[數(shù)據(jù)對(duì)象],子元素)//子元素為數(shù)組或?qū)ο?
}

數(shù)據(jù)對(duì)象的屬性：

class:{ }, //綁定class
style:{ }, //綁定樣式，
attrs:{ }, //添加行間屬性
domProps:{ }, //DOM元素屬性
on:{ }, //綁定事件

示例代碼：

    <div id="app"></div>
    <style>
        .bg {
            background-color: pink;
        }
    </style>
    <script>
        new Vue({
            el: "#app",
            render(createElement) {
                return createElement(
                    "ul",
                    {
                        class: { bg: true },
                        style: { listStyle: "none" },
                        attrs: {
                            name: "tt"
                        }
                    },
                    [
                        createElement("li", "蘋果"),
                        createElement("li", "香蕉"),
                        createElement("li", "橘子")
                    ]
                )
            }
        })
    </script>

7 watch屬性

watch屬性用來(lái)觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)，watch屬性是一個(gè)配置對(duì)象，它有兩個(gè)屬性：一個(gè)是鍵，一個(gè)是值。

鍵是需要觀察的表達(dá)式，值可以為以下形式：

對(duì)應(yīng)的回調(diào)函數(shù)，回調(diào)函數(shù)得到的參數(shù)為新值和舊值。
方法名稱的字符串（通過(guò)methods聲明）
包含額外選項(xiàng)的對(duì)象。當(dāng)使用對(duì)象語(yǔ)法時(shí)，回調(diào)函數(shù)應(yīng)被聲明在handler中。額外的選項(xiàng)包含：

選項(xiàng)	說(shuō)明
immediate	在初始化時(shí)立即調(diào)用回調(diào)函數(shù)handler。第一次調(diào)用時(shí)，舊值將為undefined
deep	如果源是對(duì)象或數(shù)組，則強(qiáng)制深度遍歷源，以便在深度變更時(shí)觸發(fā)回調(diào)
flush	調(diào)整回調(diào)的刷新時(shí)機(jī)
onTrack / onTrigger	調(diào)試偵聽器的依賴關(guān)系

new Vue({
	...
    watch: {
    	// 值為回調(diào)函數(shù)形式，newVal表示新的值，oldVal表示舊的值
        要監(jiān)視的數(shù)據(jù): function (newVal, oldVal) { }
        // 值為方法名形式：
        要監(jiān)視的數(shù)據(jù): "methods中聲明的方法名"
        // 值為包含額外選項(xiàng)的對(duì)象：
        要監(jiān)視的數(shù)據(jù): {
        	immediate: xxx,
        	handler(newVal, oldVal) {},
        	deep: xxx,
        }
    }
})

示例：點(diǎn)擊按鈕給屬性a做減法，監(jiān)聽新值與舊值。

<div id="app">
    <button @click="a--">減1</button>
    <p>{{message}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            a: 10,
            message: " ",
        },
        watch: {
            a: function (val, oldVal) {
                this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
            }
        }
    })
</script>

或者使用Vue實(shí)例中的$watch()，也可以達(dá)到監(jiān)視效果，該方法的返回值是一個(gè)取消觀察函數(shù)，用來(lái)停止觸發(fā)回調(diào)，用法如下：

// 完整形式
const vm = new Vue({ })
// unwatch：取消觀察函數(shù)
let unwatch = vm.$watch("要監(jiān)視的對(duì)象", {
    immediate: true, // 配置一些屬性
    ...
    handler(newVal, oldVal) { // 回調(diào)函數(shù)
    	unwatch(); // 停止監(jiān)聽對(duì)象
    }
})
// 簡(jiǎn)寫形式
const vm = new Vue({ })
// unwatch：取消觀察函數(shù)
let unwatch = vm.$watch("要監(jiān)視的對(duì)象", function (newVal, oldVal) {}
})

示例：點(diǎn)擊按鈕給屬性a做減法，監(jiān)聽新值與舊值。當(dāng)值為5時(shí)，停止監(jiān)聽。

<div id="app">
    <button @click="a--">減1</button>
    <p>{{message}}</p>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            a: 10,
            message: " ",
        }
    })
    let unwatch = vm.$watch("a", {
        handler(val, oldVal) {
            if (val === 5) {
                unwatch();
            }
            this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
        }
    })
</script>

computed與watch的區(qū)別

computed能完成的功能，watch都可以完成；watch能完成的功能，computed不一定能完成。
例如：watch可以進(jìn)行異步操作（使用setTimeout函數(shù)）。

8 模板渲染

8.1 條件渲染

條件渲染分為兩種方式，一種是v-if，另一種是v-show。v-if又分為單路分支、雙路分支和多路分支。只有if后面的值為true時(shí)才會(huì)有DOM元素，為false時(shí)不會(huì)有DOM元素

1、v-if方式渲染：在<template>中配合v-if渲染，在使用v-if控制元素的時(shí)候，需要將它添加到這個(gè)元素上。然而，如果需要切換很多元素時(shí)，一個(gè)一個(gè)添加比較麻煩。這時(shí)，可以使用<template></template>將一組元素進(jìn)行包裹

    <div id="app">
        <template v-if="yes">
            <h2>vue</h2>
        </template>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                yes: true
            }
        })
    </script>

2、v-show方式渲染：用法與v-if大致相同

8.2 列表渲染

列表渲染用v-for指令根據(jù)一組數(shù)據(jù)的選項(xiàng)列表進(jìn)行渲染。v-for指令需要采用item in items 形式的特殊語(yǔ)法，其中items是源數(shù)據(jù)

<div class="app">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '.app',
        data: {
            items: [
                { text: 'Name'},
                { text: 'Age'},
                { text: 'Like'}
            ]
        }
    })
</script>

可以使用v-for迭代對(duì)象的屬性

<div class="app">
    <ul>
        <li v-for="item in obj">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '.app',
        data: {
            obj: {
                firstname: '歐陽(yáng)',
                lastname: '靜靜',
                age:18
            }
        }
    })
</script>