filter过滤器
过滤器分为全局过滤器和局部过滤器，一般都是使用全局过滤器，filter的第一个参数为过滤器的名字，第二个参数为一个函数，用来实现过滤的逻辑，在模板中使用过滤器的名字即可，值就是该过滤器return的值。
<div id="app">
<input type="text" v-model="num">
<h1>当前商品价格是￥{{(num/100).toFixed(2)}}元</h1>
<h1>当前商品价格是￥{{num|qqq(3)}}</h1>
</div>
<script>
//全局过滤器 创造多少过滤器没有限制 但是需要放在实例之前
Vue.filter('qqq', function(val, n = 2) {
console.log(val);//此处的val为 | 前面的值
return `${(val/100).toFixed(n)}元`
})
let vm = new Vue({
el: '#app',
data: {
num: '',
},
methods: {
},
})
</script>
全局混入mixin & 局部混入mixins
我们可以在入口文件main.js中进行混入，这样就可以混入到每一个组件中。(注意:永远都是以组件本身的数据为主) 应用场景:团队合作开发的时候，会定义一些公共的状态、属性、方法，这时我们可以使用混入来进行使用。
全局混入
Vue.mixin({
data(){return {}},
methods:{},
created(){}
})
局部混入
局部混入一般在组件中进行混入
mixins:[{methods:{}},{data(){}},{props:['']}]
使用插件
在Vue中我们通过use对组件进行导入，如果我们不需要使用太多组件，我们还可以使用use进行按需导入
import Vue from 'vue';
import App from './App.vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import '@/assets/icon.css'
Vue.use(Vant);//导入组件库
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
按需导入
import Vue from 'vue';
import App from './App.vue';
import {Toast,Button,From} from 'vant';//从vant 中解构出需要的组件
import 'vant/lib/index.css';
import '@/assets/icon.css'
Vue.use(Toast)
.use(Button)
.use(From);//按需导入组件
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Vue.use的原理
这是Vue官方对于use的解释
Vue.use = function (plugin) {
<!-- this 是 Vue -->
const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 存储的已经装过的插件
if (installedPlugins.indexOf(plugin) > -1) {
//如果要安装的插件以前已经装过了 那么就不用再往下执行
return this
}
// arguments的第一项就是 要安装的plugin
const args = toArray(arguments, 1) // args-->[]
args.unshift(this)// args-->[Vue]
if (typeof plugin.install === 'function') {
plugin.install.call(plugin, ...args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
Keep-alive
keep-alive是用于让组件不销毁的一个标签，在Vue中只要离开组价，组件就会销毁。而用keep-alive套起来的组件则不会销毁。(注意:如果keep-alive所在的组件也被销毁，那么之前缓存的组件就会消失);另外，keep-alive不会缓存子组件中的router-view，如果想要缓存router-view渲染的组件;就需要再使用keep-alive嵌套起来。（keep-alive中的include属性代表只缓存那些组件,组件必须提供name）
例如:<keep-alive :include="['aaa']">
<template>
<div id="app">
<keep-alive>
<myButton></myButton>
</keep-alive>
</div>
</template>
keep-alive的原理
用了一个cache对象把加载过的组件实例保存起来 用了一个keys数组 把 组件实例对应的key存起来的结合了一个 LRU算法。 LRU(Least recently used)算法 就是最近最少使用的；最近使用 永远放在最后了，需要删除的时候 删除最前的那个 keys 只要使用了哪个组件，就把这个组建的key放到数组的最后，然后若存储的key超过了 数组允许的最大长度 ，就会把数组中的第一个key删除掉，然后对应的那个组件实例也会从cache 对象中移除掉;
nextTick
在下一次DOM更新后执行这个api
Vue.nextTick(function () { // DOM 更新了 })
// 作为一个 Promise 使用
Vue.nextTick().then(function () { // DOM 更新了 })
nextTick原理
异步 + 发布订阅模式 异步能用微任务就是用微任务 用不了再去使用宏任务 微任务： 先试着用Promise 用不了再试着用OberserMutation 还不能用 那就不能使用微任务了 改用宏任务 先试着用setImmediate 都不可以的话 再去使用setTimeout
