这是我参与「第五届青训营」伴学笔记创作活动的第9天

前言

本文接上文“前端入门之Vue.js——Vue基础(1) | 青训营笔记”，继续总结Vue学习过程中的重要知识点，便于日后复习巩固。

6.计算属性

用途：要用的属性不存在，需要通过已有属性计算得来。
定义：computed:{配置对象}
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。 例如，根据姓和名计算全名：

new Vue({
            el:'#root', 
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName
                    },
                    set(value){
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
                    }
                }
            }
        })

备注：

• get函数什么时候执行(其余时候直接利用缓存)
  1. 初次读取时会执行一次
  2. 当依赖的数据发生改变时会被再次调用
• 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
• 计算属性最终会出现在vm上，直接读取使用即可
• 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

7.监视属性

用途：当被监视的属性变化时，回调函数自动调用，进行相关操作
监视有两种写法：创建Vue时传入watch配置 和 通过vm.$watch监视
使用：

data:{
    isHot:true,
},
watch:{
    isHot:{
        immediate:true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }
}

7.1深度监视

用途：

1. Vue中的watch默认不监测对象内部值的改变（一层） 例如：

data:{
    numbers:{
        a:1,
        b:2,
    }
},
watch:{
    numbers:{
        handler(){
            console.log("numbers改变了")
        }
    }
}

此时，只修改a或b，console.log里的内容并不会输出。

2. 在watch中配置deep:true可以监测对象内部值的改变（多层）

data:{
    numbers:{
        a:1,
        b:2,
    }
},
watch:{
    isHot:{
        deep:true,
        handler(){
            console.log("isHot改变了")
        }
    }
}

此时，修改numbers里的任何值，console.log都会输出。

简写：

watch:{
    numbers(newValue,oldValue){ 
        console.log('isHot被修改了',newValue,oldValue,this) 
    }
}

8.监听属性VS计算属性

总结：

• computed和watch之间的区别：
  • computed能完成的功能，watch都可以完成
  • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
• 两个重要的小原则：
  • 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
  • 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

9.绑定样式

绑定样式同样是使用v-bind，但这次是在class前使用。
使用方法：v-bind:class="xxx" 缩写为:class="xxx"

<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>

    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
        el:'#root',
        data:{
            name:'juejin',
            mood:'normal',
            classArr:['juejin1','juejin2','juejin3'],
            classObj:{
                juejin1:false,
                juejin2:false,
            },
            styleObj:{
                fontSize: '40px',
                color:'red',
            },
            styleObj2:{
                backgroundColor:'orange'
            },
            styleArr:[
                {
                    fontSize: '40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ]
        },
        methods: {
            changeMood(){ //随机生成一种样式
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>

总结：
1.class样式：

• 写法：class="xxx"，xxx可以是字符串、对象、数组
• 字符串写法适用于：类名不确定，要动态获取
• 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
• 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

2.style样式：

• :style="{fontSize: xxx}"其中xxx是动态值
• :style="[a,b]"其中a、b是样式对象