★ vue中v-show和v-if的异同

对于不显示再页面上的元素

v-if干脆不去渲染，dom中就没有这个节点，v-if创建DOM元素，销毁DOM元素，开销比较大

v-show 设置display:none给隐藏，但是会渲染再dom里面

一、官方解释：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二、个人理解：

相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：

实现本质方法不同
- v-show本质就是通过设置css中的display设置为none，控制隐藏
- v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
- v-show其实就是在控制css
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
- v-show都会编译，初始值为false，只是将display设为none，但它也编译了
- v-if初始值为false，就不会编译了
性能

v-if要创建DOM元素，销毁DOM元素，性能开销大

-   v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
-   注意点：因为v-show实际是操作display:" "或者none，当css本身有display：none时，
    v-show无法让显示
-   总结：如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，
    此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，
    使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制
    显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

★ v-html

会覆盖子元素的html 会遇到XSS攻击

★ 计算属性 computed

1.有缓存

计算属性 a 依赖的数据 b 不发生变化的时候，a就不会重新计算，只有b发生变化的时候，才会重新计算，才会运行这个函数，首次肯定是会运行的

2.可以定义 get set 【跟v-model数据结合】

取值可以用get，赋值要用set，如果不用set改变computed属性的值，会报错的，提示 no setter

computed:{
    double1(){
        return this.number*2
    }
    double2:{
        get() {
            return this.number*2
        }
        set(value) {
            this.number = value/2 // 改变get依赖的值，从而number变了，double2就变了
        }
    }
}

★ watch

基本用法

监听器，监听到属性变化，拿到新值和老值，变化的时候会执行watch函数

监听字符串

watch:{
    //  普通类型
    name(newVal,oldVal){
        console.log(newVal,oldVal)
    },
}

对象监听【handler + deep:true】

watch:{
    //  普通类型
    name(newVal,oldVal){
        console.log(newVal,oldVal)
    },
    
    // 对象类型，要handler  还有deep:true 深度监听
    infoObj:{
        handler:function(newVal,oldVal){
           //console.log(newVal,oldVal)
        
        },
        deep:true // 深度监听
    }
}

deep 和 immediate

deep表示深侦听【针对对象监听】
immediate：组件加载立即触发callback回调函数执行

watch和computed的应用场景

当我们试图通过数据对象来创造另一个属性时，推荐使用computed -当我们试图通过侦听数据对象的改变来做点什么，我们就可以使用watch，尤其要注意其为有异步执行的特点。

watch和computed的区别

缓存：computed支持，watch不支持
异步：computed不支持【当computed内有异步操作时无效，无法监听数据的变化】，watch支持异步【里面可以写ajax等异步操作】，watch不仅支持异步还有异步的特点，immediate是表示当侦听开始时就先触发callback函数，回调嘛，异步嘛，要不他不执行，所以是异步的

★ 动态绑定类名和样式

:class="{'active':isActive}" :class="['active']"

:style=styleData// 内联样式实现的

3.VUE指令v-show和v-if、computed、watch