你应该知道的Vue高级特性

本文使用的vue版本：2.6.10

vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。

一、watch进阶

从我们刚开始学习vue的时候，对于侦听属性，都是简单地如下面一般使用：

watch:{a(){ //dosomething}}

实际上，vue对watch提供了很多进阶用法。

handler函数

以对象和handler函数的方式来定义一个监听属性，handler就是处理监听变动时的函数：

watch:{a:{handler:'dosomething'}},methods:{dosomething(){//当 a 发生变化的时候，做些处理}}

handler有啥用？是多此一举么？用途主要有两点：

将处理逻辑抽象出去了，以method的方式被复用给定义下面两个重要属性留出了编写位置

deep属性

不知道你注意到了没有？

当watch的是一个object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作！

也就是说，watch默认情况下，不监测内部嵌套数据的变动。但是很多情况下，我们是需要监测的！

为解决这一问题，就要使用deep属性：

watch:{obj:{handler:'dosomething',deep:true}},methods:{dosomething(){//当 obj 发生变化的时候，做些处理}}

deep属性默认为fal，也就是我们常用的watch模式。

immediate属性

watch 的handler函数通常情况下只有在监听的属性发生改变时才会触发。

但有些时候，我们希望在组件创建后，或者说watch被声明和绑定的时候，立刻执行一次handler函数，这就需要使用immediate属性了，它默认为fal，改为true后，就会立刻执行handler。

watch:{obj:{handler:'dosomething',deep:true,immediate:true}},methods:{dosomething(){//当 obj 发生变化的时候，做些处理}}

同时执行多个方法

使用数组可以设置多项，形式包括字符串、函数、对象

  watch二年级口算题上册: {    // 你可以传入回调数组，它们会被逐一调用    a: [              'handle1',              function handle2 (val, oldval) { /* ... */ },              {        handler: function handle3 (val, oldval) { /* ... */ },        /* ... */      }            ],      }

二、$event的不同表现

$event 是事件对象的特殊变量，在两种场景下，它有不同的意义，代表不同的对象。

在原生事件中表示事件本身。可以通过$event.target获得事件所在的dom对象，再通过value进一步获取具体的值。

<template>    <div>        <input type="text" @input="inputhandler('hello', $event)" />    </div></template>export default {    methods: {        in馨仪puthandler(msg, e) {            console.log(e.target.value)        }    }}

而在父子组件通过自定义事件进行通信时，表示从子组件中传递出来的参数值

看下面的例子：

//blog-post组件的模板<button v-on:click="$emit('enlarge-text', 0.1)">  enlarge text</button>

在父级组件监听这个事件的时候，可以通过 $event 访问到blog-post子组件传递出来的0.1这个值：

<blog-post  ...  v-on:enlarge-text="postfontsize += $event"></blog-post>

此时，$event的值就是0.1，而不是前面的事件对象。

三、异步更新队列

vue 在更新 dom 时是异步执行的。只要侦听到数据变化，vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

这种在缓冲时去除重复数据对于避免不必要的计算和 dom 操作是非常重要的。然后，在下一个的事件循环“tick”中，vue 刷新队列并执行实际 (已去重的) 工作。vue 在内部对异步队列尝试使用原生的 promi.then、mutationobrver 和 timmediate，如果执行环境不支持，则会采用 ttimeout(fn, 0) 代替。

例如，当你设置 vm.somedata = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。

多数情况我们不需要关心这个过程，但是如果你想基于更新后的 dom 状态来做点什么，这就可能会有些棘手。

虽然 vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 dom，但是有时我们必须要这么做。为了在数据变化之后等待 vue 完成更新 dom，可以在数据变化之后立即使用 vue.nexttick(callback)。

这样回调函数将在 dom 更新完成后被调用。例如：

<div id="example">{{message}}</div>var vm = new vue({  el: '#example',  data: {    message: '123'  }})vm.message = 'new message' // 更改数据vm.$el.textcontent === 'new message' // falvue.nexttick(function () {  vm.$el.textcontent === 'new message' // true})

在组件内使用 vm.$nexttick() 实例方法特别方便，因为它不需要全局 vue，并且回调函数中的 this 将自动绑定到当前的 vue 实例上：

vue.component('example', {  template: '<span>{{ message }}</span>',  data: function () {    return {      message: '未更新'    }  },  methods: {    updatemessage: function () {      this.message = '已更新'      console.log(this.$el.textcontent) // => '未更新'      this.$nexttick(function () {        console.log(this.$el.textcontent) // => '已更新'      })    }  }})

因为 $nexttick() 返回一个 promi 对象，所以你可以使用新的 es2017 async/await 语法完成相同的事情：

methods: {  updatemessage: async function () {    this.message = '已更新'      //在这里可以看出，message并没有立刻被执行      //要理解页面刷新和代码执行速度的差别      //通常我们在页面上立刻就能看到结果，那是因为一轮队列执行其实很快，感觉不出dom刷新的过程和所耗费的时间      //但对于代码的执行，属于即刻级别，dom没更新就是没更新，就是会有问题    con早安最火图片sole.log(this.$el.textcontent) // => '未更新'          await this.$nexttick()    console.log(this.$el.textcontent) // => '已更新'  }}

通俗的解释：

vue的dom刷新机制是个异步队列，并不是你想象中的立刻、马上、即时更新！

这个异步队列是一轮一轮的执行并刷新

上面带来的问题是，一些依赖dom更新完毕才能进行的操作（比如对新增加的dom元素进行事件绑定），无法立刻执行，必须等待一轮队列执行完毕

最容易碰到上面问题的地方：created生命周期钩子函数中对dom进行操作

解决办法：使用this.nexttick(回调函数)方法，将对dom的操作作为它的回调函数使用。

四、函数式组件

因为传统编写模板的能力不足，我们引入了渲染函数createelement。我们又希望获得更多的灵活度，于是引入了jsx。最后，我们发现有些简单的模板可以更简单更小巧的实现，于是引入了函数式组件。vue总是试图为每一种场景提供不同的能力。

有这么一类组件，它的特点是：

比较简单没有管理任何状态，也就是说无状态，没有响应式数据没有监听任何传递给它的状态没有写生命周期方法本质上只是一个接收一些prop的函数没有实例，没有this上下文

那么这个组件可以定义为函数式组件。与普通组件相比，函数式组件是无状态的，无法实例化，没有任何的生命周期和方法，适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能会有所提高。

创建函数式组件

以定义全局组件的方式

vue.component('my-component', {  functional: true,  // props 是可选的  props: {    // ...  },  // 为了弥补缺少的实例  // 提供第二个参数作为上下文  render: function (createelement, context) {    // ...  }})

注意其中的functional: true,

在 vue 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。

当使用函数式组件时，该引用将会是 htmlelement，因为他们是无状态的也是无实例的。

对于单文件组件，创建函数式组件的方式是在模板标签内，添加functional属性

<template functional>...</template><script>...</script><style>...</style>

最重要腰酸是什么原因的context参数

因为无状态，没有this上下文，所以函数式组件需要的一切都是通过 context 参数来传递，它是一个包括如下字段的对象：

props：提供所有 prop 的对象children：vnode 子节点的数组slots：一个函数，返回了包含所有插槽的对象scopedslots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。data：传递给组件的整个数据对象，作为 createelement 的第二个参数传入组件parent：对父组件的引用listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

应用场景

函数式组件的一个典型应用场景是作为包装组件，比如当你碰到下面需求时：

程序化地在多个组件中选择一个来代为渲染；在将 children、props、data 传递给子组件之前操作它们。

下面是一个 smart-list 组件的例子，它能根据传入 prop 的值来代为渲染更具体的组件：

var emptylist = { /* ... */ }var tablelist = { /* ... */ }var orderedlist = { /* ... */ }var unorderedlist = { /* ... */ }vue.component('smart-list', {  functional: true,  props: {    items: {      type: array,      required: true    },    isordered: boolean  },  render: function (createelement, context) {    function appropriatelistcomponent () {      var items = context.props.items      if (items.length === 0)           return emptylist      if (typeof items[0] === 'object') return tablelist      if (context.props.isordered)      return orderedlist      return unorderedlist    }    return createelement(      appropriatelistcomponent(),      context.data,      context.children    )  }})

五、监听子组件的生命周期

假如我们有父组件parent和子组件child，如果在父组件中需要监听子组件的mounted这个生命周期函数，并做一些逻辑处理，常规写法可能如下：

// parent.vue<child @mounted="dosth" />//child.vuemounted(){    this.$emit('mounted');}

但是，vue给我们提供了一种更简便的方法，子组件无需做任何处理，只需要在父组件引用子组件时使用@hook事件来监听即可，代码如下：

// parent.vue<child @hook:mounted="dosth" />  methods:{    dosth(){        //some codes here    }}

核心是@hook:mounted="dosth"的写法！

当然这里不仅仅可以监听mounted，其他生命周期都可以监听，例如created、updated等。

六、样式穿透

我们知道，在单文件组件的style中使用 scoped 属性后，父组件的样式将不会渗透到子组件中。

不过一个子组件的根节点会同时受其父组件的 scoped css 和子组件的 scoped css 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

如果你希望父组件的 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用深度选择器： >>> 操作符。

<style scoped>.a >>> .b { /* ... */ }</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

但是，有些像 sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符，这两者都是 >>> 的别名，实现同样的功能。

我们都知道，通过 v-html 创建的 dom 内容不受 scoped 样式影响，可以通过深度作用选择器>>>来为他们设置样式。

七、路由的props属性

一般在组件内使用路由参数，大多数人会这样做：

export default {    methods: {        getparamsid() {            return this.$route.params.id        }    }}

当你随便用用，临时凑手，这没什么问题，毕竟解决了需求。

可我们要随时谨记：组件是用来复用的！组件应该有高度的封闭性！

在组件中使用 $route 会使它与路由系统形成高度耦合，从而使组件只能在使用了路由功能的项目内，或某些特定的 url 上使用，限制了其灵活性。

试想一下，如果你的组件被人拿去复用了，但是那个人并没有使用路由系统，而是通过别的方式传递id参数，那么他该怎么办？

正确的做法是通过 props 解耦！

首先，为组件定义一个叫做id的prop：

export default {    props: ['id'],    methods: {        getparamsid() {            return this.id        }    }}

如果组件没有对应路由，那么这个id也可以通过父组件向子组件传值的方式使用。

如果使用了路由，可以通过路由的prop属性，传递id的值：

const router = new vuerouter({    routes: [{        path: '/ur/:id',        component: ur,        props: true    }]})

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数

另外，你还可以通过函数模式来返回 props

const router = new vuerouter({    routes: [{        path: '/ur/:id',        component: ur,        props: (route) => ({            id: route.query.id        })    }]})

其实，上面的技巧，在vuerouter的官档都有说明。

八、异世界最顶尖的十所大学步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

为了简化，vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：

vue.component('async-example', function (resolve, reject) {  ttimeout(function () {    // 向 `resolve` 回调传递组件定义    resolve({      template: '<div>i am async!</div>'    })  }, 1000)})

如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。

你也可以调用 reject(reason) 来表示加载失败。这里的 ttimeout 是为了演示用的，如何获取组件取决于你自己。

一个推荐的做法是将异步组件和 一起配合使用：

vue.component('async-webpack-example', function (resolve) {  // 这个特殊的 `require` 语法将会告诉 webpack  // 自动将你的构建代码切割成多个包，这些包  // 会通过 ajax 请求加载  require(['./my-async-component'], resolve)})

你也可以在工厂函数中返回一个 promi，所以把 webpack 2 和 es2015 语法加在一起，我们可以写成这样：

vue.component(  'async-webpack-example',  // 这个 `import` 函数会返回一个 `promi` 对象。  () => import('./my-async-component'))

当使用局部注册组件的时候，你也可以直接提供一个返回 promi 的函数：

new vue({  // ...  components: {    'my-component': () => import('./my-async-component')  }})

如果你想实现异步加载组件的功能，提高首屏显示速度，那么可以使用上面例子中的定义组件的方法，也就是：箭头函数+import语句！

处理加载状态

2.3.0+ 新增

异步组件的工厂函数也可以返回一个如下格式的对象，用来灵活定制异步加载过程：

const asynccomponent = () => ({  // 需要加载的组件 (应该是一个 `promi` 对象)  component: import('./mycomponent.vue'),  // 异步组件加载时使用的组件  loading: loadingcomponent,  // 加载失败时使用的组件  error: errorcomponent,  // 展示加载时组件的延时时间。默认值是 200 (毫秒)  delay: 200,  // 如果提供了超时时间且组件加载也超时了，  // 则使用加载失败时使用的组件。默认值是：`infinity`  timeout: 3000})

注意如果你希望在 vue router 的路由组件中使用上述语法的话，必须使用 vue router 2.4.0+ 版本。

九、批量导入组件

很多时候我们会编写一些类似输入框或按钮之类的基础组件，它们是相对通用的组件，称为基础组件，它们会在更大一些的组件中被频繁的用到。

这很容易导致大的组件里有一个很长的导入基础组件的语句列表，例如：

import babutton from './babutton.vue'import baicon from './baicon.vue'import bainput from './bainput.vue'//更多导入export default {  components: {    babutton,    baicon,    bainput  }}

当你的基础组件很多的时候，这个过程将非常重复、麻烦和无聊。

require.context()

如果你恰好使用了 webpack (或在内部使用了 webpack 的 vue cli 3+)，那么就可以使用 require.context 方法批量导入这些组件，然后将它们注册为全局组件，这样就可以在任何地方直接使用它们了，再也不用为导入的事情烦恼了！

下面是一个示例代码：

import vue from 'vue'import upperfirst from 'lodash/upperfirst'import camelca from 'lodash/camelca'const requirecomponent = require.context(  // 其组件目录的相对路径  './components',  // 是否查询其子目录  fal,  // 匹配基础组件文件名的正则表达式  /ba[a-z]\w+\.(vue|js)$/)requirecomponent.keys().foreach(filename => {  // 获取组件的配置，也就是具体内容，具体定义，组件的本身代码  const componentconfig = requirecomponent(filename)  // 获取组件的 pascalca 命名，用来规范化组件名  const componentname = upperfirst(    camelca(      // 获取和目录深度无关的文件名      filename        .split('/')        .pop()        .replace(/\.\w+$/, '')    )  )  // 全局注册组件  vue.component(    componentname,    // 如果这个组件选项是通过 `export default` 导出的，    // 那么就会优先使用 `.default`，    // 否则回退到使用模块的根。    componentconfig.default || componentconfig  )})

记住全局注册的行为必须在根 vue 实例 (通过 new vue) 创建之前发生。

更多内容请访问:

更多视频教程请访问: