vue基础和高级用法

vue基础

我们可以通过多种⽅式引⼊ vue ，这⾥来详细的进⾏对⽐：

1. 直接引⽤ vue.js ，适合⼩型项⽬或部分使⽤ vue
2. 引⽤全部 vue.js，运⾏时编译及渲染
3. 引⽤部分 vue.js，仅引⼊渲染部分
4. 使⽤ vue-cli ⼯程化启动整体 vue 项⽬ computed：计算属性，如果不改变监控的值，不会调用方法，使用时是一个值；惰性求值，如果里面的值不变，不会调用。只能通过变量使用 function: 可以带参数，使用时带括号

beforeCreate，created 这两个生命周期服务端渲染会在这两个生命周期里操作，可能会有冲突的地方， 所以请求放在Mounted.

created 生命周期之后会判断是否制定el选项，是否制定template选项（模板），是的话，将template编译到render上，否则将外部的html作为template编译，此时的 html是outerhtml

模版中的 {{}} 内部接受⼀个表达式；布尔表达式，函数表达式，逗号表达式，赋值表达式，三目运算符

vue高级用法

动画特效---待完善

slot 使⽤

• 默认slot使⽤

⼦组件⽤标签来确定渲染的位置，标签⾥⾯可以放DOM结构，当⽗组件使⽤的时候没有往插 槽传⼊内容，标签内DOM结构就会显示在⻚⾯

• 具名slot使⽤ ⼦组件⽤v-slot来表示插槽的名字，不传为默认插槽 ⽗组件中在使⽤时在默认插槽的基础上加上slot属性，值为⼦组件插槽v-slot的属性值

slot 实现原理：slot本质上是返回VNode的函数，⼀般情况下，Vue中的组件要渲染到⻚⾯上需要经过 template render function VNode DOM 过程。

- 作⽤域slot使⽤

组件间传递数据 ⼀个基础的基于slot的⻚⾯布局 Slot-Container.vue Page-1.vue Page-2.vue router/index.ts

Mixin

本质其实就是⼀个js对象，它可以包含我们组件中任意功能选项，如data、components、 methods、created、computed等等 我们只要将共⽤的功能以对象的⽅式传⼊ mixins选项中，当组件使⽤ mixins对象时所有mixins 对象的选项都将被混⼊该组件本身的选项中来

在Vue中我们可以 局部混⼊ 和 全局混⼊, 全局混⼊常⽤于编写插件

mixin 和组件里钩子 都有 先执行mixin 钩子

Tips:

• 当组件存在与mixin对象相同的数据的时候，进行递归合并的时候组件的数据会覆盖mixin的数据
• 如果相同数据为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子

mixin 实现原理

• 优先递归处理 mixins
• 先遍历合并parent 中的key，调用mergeField方法进行合并，然后保存在变量options
• 再遍历 child，合并补上 parent 中没有的key，调用mergeField方法进行合并，保存在变量options
• 通过 mergeField 函数进行了合并

其实主要的逻辑就是合并mixin和当前组件的各种数据, 细分为四种策略：

• 替换型策略 - 同名的props、methods、inject、computed会被后来者代替
• 合并型策略 - data, 通过set⽅法进⾏合并和重新赋值
• 队列型策略 - ⽣命周期函数和watch，原理是将函数存⼊⼀个数组，然后正序遍历依次执⾏
• 叠加型策略 - component、directives、filters，通过原型链进⾏层层的叠加

过滤器 - Filter

过滤器实质不改变原始数据，只是对数据进⾏加⼯处理后返回过滤后的数据再进⾏调⽤处理， 我们也可以理解其为⼀个纯函数 Vue 允许你⾃定义过滤器，可被⽤于⼀些常⻅的⽂本格式化, ⽐如单位转换、数字打点、⽂本 格式化、时间格式化等等。 但是Vue3中被弃⽤了, 建议使⽤computed实现这些功能

局部过滤器优先于全局过滤器被调⽤ ⼀个表达式可以使⽤多个过滤器。过滤器之间需要⽤管道符“|”隔开。其执⾏顺序从左往右

插件 - Plugin

简单来说，插件就是指对Vue的功能的增强或补充。

Vue.use做了什么? 判断当前插件是否已经安装过, 防⽌重复安装 处理参数, 调⽤插件的install⽅法, 第⼀个参数是Vue实例.

// Vue源码⽂件路径：src/core/global-api/use.js 
import { toArray } from '../util/index' 
export function initUse (Vue: GlobalAPI) { 
    Vue.use = function (plugin: Function | Object) { 
        const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) 
        if (installedPlugins.indexOf(plugin) > -1) { 
            return this 
        } // additional parameters 
        const args = toArray(arguments, 1) 
        args.unshift(this) 
        if (typeof plugin.install === 'function') {
            plugin.install.apply(plugin, args) 
        } else if (typeof plugin === 'function') {
            plugin.apply(null, args) 
        } installedPlugins.push(plugin) 
        return this 
   } 
}