26 Vue watch属性和computed属性

watch属性

watch可以监视data中指定数据的变化,然后触发这个watch中对应的function处理函数,示例如下:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串拼接title>
    <script src="vue/vue.js">script>

head>

<body>

    <div id="app">
        <input type="text" id="f" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
                fullname: ""
            },
            watch: {
                "firstname": function (newval, oldval) {
                    this.fullname = newval + "-" + this.lastname;
                },
                "lastname": function (newval) {
                    this.fullname = this.firstname + "-" + newval;
                }
            },
        })
    script>
body>

html>

watch中数据对应的函数具有两个参数,新值和旧值

运行如下:

26 Vue watch属性和computed属性_第1张图片

fullname属性会动态的随着firstnamelastname值的变化而变化。

watch还能用于监听非dom元素如router的地址变化,如下示例:

"$route.path": function (newval, oldval) {
        console.log("路由地址变化...");
}

这很有用!

computed属性

同样对于上述案例,我们还可以使用vue对象的computed属性进行对上述案例的重构,在computed属性中,我们可以定义一些称为计算属性的函数,在使用的时候当作属性而非方法。如下案例:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串拼接title>
    <script src="vue/vue.js">script>
    <script src="vue/vue-router.js">script>

head>

<body>

    <div id="app">
        <input type="text" id="f" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
            },
            computed: {
                "fullname": function () {
                    return this.firstname + "-" + this.lastname
                }
            },
        })
    script>
body>

html>

这也实现了上述效果。而且需要注意的是,该值的计算结果会被缓存,也就是说改变之后,computed中方法只会运行一次,如果同时还有取值,则会从缓存中获得。如下:

<body>
    <div id="app">
        <input type="text" id="f" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
        {{fullname}}

    div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
            },
            computed: {
                "fullname": function () {
                    console.log("ok")
                    return this.firstname + "-" + this.lastname
                }
            },
        })
    script>
body>

运行结果:
26 Vue watch属性和computed属性_第2张图片
以上。

你可能感兴趣的:(Vue,vue,watch,computed)