vue 的class绑定方式，模板语法，计算属性，深度侦听

1. class绑定方式

(1) :class="{box1:flag}" key代表style样式下的class名,val为布尔值控制绑定,动态绑定的class可以和固定静态class共存,绑定动态的class可以配合表单的v-model使用,例如checkbox

(2) :class=“boxStyle” 对象方式绑定多个class,推荐使用在data写入对象的形式操作class

(3) :class="[activeStyle,boxStyle]",在data数据下

activeStyle:‘box1’,

boxStyle:‘box2’

key需要绑定到行间class的值,val会自动查找style样式中给定的class名,使用数组的方式可以动态修改class名

2. 模板语法的注意事项:

不要使用关键字保留字,不要进行赋值,可以使用三目运算符,if不能使用,简单的表达式和计算可以写在模板语法中,但是过重的表达式不要写在模板语法中,指令中也可以承载表达式,但是过重的表达式不要写在模板语法中

3. 计算属性

(1) 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性,计算属性的仓库,较为复杂的计算且最终得到的是一个值(结果),要写在计算属性下边

(2) methods和computed的区别

调用时,methods是方法需要加(),computed是结果(一个值),不需要加();computed在计算结果时,会进行缓存,如果后边调用的结果和之前的相同,不会重复计算,methods下的方法调用一次,计算一次,消耗性能,最终如果拿到的是一个计算好的结算,推荐使用computed

4. 侦听属性(监听属性) watch:{}

侦听属性的方法名要和data下的属性名相对应, 当表单中绑定对应的data下的值发生变化时,自动会触发侦听属性,比较消耗性能,如果能用其他方法代替侦听属性就不要优先使用侦听属性,侦听属性下可以接受一个参数,对应的就是data下属性的值

methods computed和watch三者的区别

5. 深度侦听:对象类型的数据中的值发生变动,需要使用深度侦听去触发方法

(1) watch下的方法改成对象形式

(2) handler(val) 使用触发事件的语句柄,val接收的是改变过之后的整体的对象,而不是对象下修改过后的某一条属性

(3) deep:true 开启深度侦听 true

当触发深度侦听时,watch下的方法会将整个对象进行遍历,当发现有属性被发生改变时就触发深度侦听,只要改变data下对应的对象属性值,就会把整个对象遍历一次,非常消耗性能,慎用