Vue侦听器&计算属性&组件

计算属性

概述：计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

语法：

案例：

<div id="app">
        <h1>{{strfn}}</h1>
        <h2 @click="getC">{{rvalue}}</h2>
        <ul>
            <!-- v-for 不推荐和v.flag 作用于同一个元素 因为v-for比v-if的优先级更高 -->
            <li v-for="(v,i) in nlist" :key="v.name">
                {{v.name}}
            </li>
        </ul>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            /* 计算属性是一个属性 */
            computed: {
                strfn: function () {
                    /* 必须要return */
                    return this.name1 + this.name2;
                },
                nlist: function () {
                    return this.list.filter(v => v.flag);
                },
                rvalue: function () {
                    /* 计算属性具有缓存数据效果，利于减少性能消耗 */
                    /* 只有data中的属性的值发生了变化，计算属性才会更新 */
                    return this.num + '---' + Math.random()
                }
            },
            methods: {
                getC() {
                    this.num++;
                    console.log(this.rvalue);
                }
            },
            data: {
                name1: "黄埔",
                name2: "雪艳",
                num: 1,
                list: [{
                    name: "zhangsan",
                    flag: true
                }, {
                    name: "lisi",
                    flag: false
                }, {
                    name: "wangwu",
                    flag: true
                }]
            }
        })
    </script>

侦听器（watch监控）

概述：

watch可以监听简单属性值及其对象中属性值的变化.

watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.

语法：

<div id="app">
        <h1 @click="getC">{{num}}</h1>
        <h1 @click="setPrice">价格：{{obj.price}}</h1>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            /* 项目中监听路由的变化就需要使用侦听器 */
            watch: {
                /* 基本数据类型的写法 */
                num: function (newV, oldV) {
                    console.log(newV, oldV);
                    if (newV > 5) {
                        alert("价格太贵了")
                    }
                },
                /* 引用数据类型需要深度监听 deep:true */
                // obj: {
                //     handler: function (v) {
                //         console.log('价格改变了' + v);
                //         console.log(v);

                //     },
                //     deep: true,
                //     /* 一进入页面就会执行侦听器 */
                //     immediate: true
                // },
                /* 引用数据类型简单粗暴的用法 */
                'obj.price': function () {
                    console.log("价格改变了")
                }
            },
            data: {
                num: 1,
                obj: {
                    price: 0
                }
            },
            methods: {
                getC() {
                    this.num++;
                },
                setPrice() {
                    this.obj.price++;
                }
            },
        })
    </script>

Vue的组件：

分为全局组件 局部组件：

Vue组件

子组件如何改变父组件的数据：