vue碎碎念

v-html、v-text、插值表达式 之间的区别

• v-text 与 插值表达式 区别

1、v-text作为标签属性，{{}}作为标签内容
2、安全性都非常高，自带防止XSS攻击
3、对html标签/JS代码不渲染

• v-html

1、对html标签进行渲染
2、不执行<script></script>中的代码
3、安全性不如上面2种高，标签中的js代码执行，如下

data: {
    content: ' <b onclick=\"alert(123)\">你好</b>'
}

// 使用时
<p v-html="content"></p>

少用 v-html，尽量使用 v-text 或 插值表达式

内置组件 <keep-alive>

• 作用

在路由切换时，组件缓存在内存里，无需销毁，下次激活时无须重新创建。性能高，用户体验更好

原本路由切换时，组件会销毁

• 适用场景

1、缓存的组件必须是对实时性没有要求
2、缓存的组件必须是一级路由的组件，对二级、三级路由组件无效

例如：一级路由的组件不需要缓存的，但二级路由的组件需要缓存，那么会导致一级路由组件也会缓存下来，所以不符合使用需求

• 实现

实现一些页面组件（一级路由组件）需要缓存？一些不需要缓存？

// 路由定义
{
    path: "/",
    name: "BootLoader",
    component: BootLoader,
    meta: {
        keepAlive: false
    }
}

// 模板中使用
<keep-alive>
   <router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>

data、prop、计算属性、侦听器 之间区别

• data

1、不是响应式的，data只会初始化一次，data中的属性可以用变量进行赋值，变量改变，但data不会响应式改变
2、data中的属性值不能是函数
3、data中的属性必须显式手动修改，这样界面才会响应式刷新

• prop

1、只能由父组件进行修改，子组件不能直接修改prop
2、如果子组件需要修改，必须把prop赋值给data，然后修改data
3、prop是响应式的，父组件修改，子组件马上响应

Vue.use() 与 Vue.prototype.$xxx 区别

• Vue.use() 作用 —— 安装Vue插件

1、Vue的插件是一个对象（或者是一个函数）.
2、插件对象必须有install字段.
3、install字段是一个函数.
4、初始化插件对象需要通过Vue.use().
5、Vue.use()调用必须在new Vue之前.
6、同一个插件多次使用Vue.use()也只会被运行一次.

• Vue.prototype.$xxx

1、全局定义属性或方法，每个Vue实例（Vue组件）都可以直接使用，例如：this.$xxx

注意：很容易造成全局污染

• 区别

其实 没有区别

Vue.use（plugin）  =>   plugin.install()

例如插件有很多方法或属性要注册时，如果自己手动写Vue.prototype.$xxx会累死，
所以在插件内一次过写，再调用Vue.use()就方便多了

通过 install方法给 Vue实例 添加全局功能