重读Vue教程

Vue.js 是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 是一个提供了 MVVM 模式的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel 负责连接 View 和 Model，保证视图和数据的一致性。

MVVM是什么？

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 View 的变化会自动更新到 ViewModel，ViewModel 的变化也会自动同步到View 上显示，即所谓的数据双向绑定。

  • View： 视图，即 DOM；对应 HTML 部分（代表 UI 组件），它负责将数据模型转化成 UI 展现出来。

  • Model： 模型，即数据模型；对应 Vue 组件里的 data，或者说是 vuex 里的数据；也可以在 Model 中定义数据修改和操作的业务逻辑。

  • ViewModel： 监听模型数据，也就是 data 的的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。

MVVM 是基于 MVC 的设计，开发人员在 HTML 标签上写一些指定，利用一些指令绑定，就能在 Model 和ViewModel 保持不变的情况下，很方便的将 UI 设计与业务逻辑分离，从而大大的减少繁琐的 DOM 操作。

MVVM 框架与 MVC 框架的主要区别有两点：

  • 实现数据与视图的分离

  • 通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

Vue响应式原理

一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

Class 与 Style 绑定

用 v-bind 绑定 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div v-bind:class="(isActive ? 'active' : '') + ' error'"></div>
<div v-bind:class="[isActive ? 'active' : '', 'error']"></div>
<div v-bind:class="{active: isActive, error: true }"></div>
<div v-bind:class="[{ active: isActive }, 'error']"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<!--数组语法可以将多个样式对象应用到同一个元素上-->
<div v-bind:style="[
	{ color: activeColor, fontSize: fontSize + 'px' },
  { border: '1px solid red'}
]"></div>

<!--2.3.0起，可以传一个包含多个值的数组，常用于提供多个带前缀的值-->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

事件处理

事件的绑定

  • v-on 指令： 指令可以直接运行一些 JavaScript 代码，也可以绑定事件处理方法，还可以在内联 JavaScript 语句中调用方法。

<button v-on:click="window.alert('hello')">hello</button>
<button v-on:click="hello">hello</button>
<button v-on:click="hello()">hello</button>

需要注意：绑定事件处理方法，不能传参，但会将 event 做为方法的第一个参数；而直接调用方法 hello()，是可以指定传参的。同时，如果需要用到 event 时，可以传入特殊变量 $event 。

<button v-on:click="hello('lizh', $event)">hello</button>

  • vm.$on( event, callback )： 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

    vm.$on('test', msg => {
	console.log(msg)
})
vm.$emit('test', 'hello')
// hello

将原生事件绑定到组件

使用 v-on 的 .native 修饰符，可以在一个组件的根元素上直接监听一个原生事件。

<my-component v-on:focus.native="onFocus"></my-component>

不过，有时候你可能并不是想将事件传递给组件的根元素，而是组件中的某个特定元素。

Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。再配合 v-on="$listeners" 将所有的事件监听器指向组件中的某个特定的子元素。

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

<input v-on="$listeners"></input>

事件修饰符

  • .stop： 阻止事件冒泡；

  • .prevent： 阻止事件默认行为；

  • .capture： 添加事件监听器时使用事件捕获模式；

  • .self ： 只当在 event.target 是当前元素自身时触发处理函数；

  • .once： 事件将只会触发一次；

  • .passive： 事件的默认行为会立即触发，优先级高于 prevent；

  • :keyup.enter： 监听键盘 enter 按键；

  • :keyup.page-down： 监听键盘 pageDon 按键；

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

需要注意：键盘按键的键值，在不同浏览器可以不一样。Vue 内置了以下别名，支持旧浏览器：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .righ。

组件注册

全局注册：

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部注册：

const ComponentA = { /* ... */ }
const ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

自动化全局注册：

Webpack 有一个 API require.context()，用来获取指定的文件夹内的特定文件。require.context 返回的结果是一个函数，该函数的传参是匹配的文件名的相对路径，返回的是一个模块。

require.context(directory，useSubdirectories，regExp)

require.context 返回的函数，还有以下三个属性：

  • resolve：函数，接文件夹下面匹配文件的相对路径，返回该文件相对于整个工程的相对路径；

  • keys：函数，返回匹配成功文件的名字组成的数组；

  • id：执行环境的id，返回的是一个字符串，主要用在 module.hot.accept ，应该是热加载？

我们可以使用 require.context 全局注册一些非常通用的基础组件。

// 入口文件，如：src/main.js

import Vue from 'vue'
const requireComponent = require.context(
  '../../../components/form_items', // 其组件目录的相对路径
  false, // 是否查询其子目录
  /\.(vue|js)$/ // 匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName => {
  const componentName = fileName.split('/')[1].split('.')[0]
  const componentConfig = requireComponent(fileName)

  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`；
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

Prop和 Attribute

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

props: {
  propB: {
		type: [String, Array], // 原生构造函数，或原生构造函数组成的数组。包括：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数。
    default: any || () => ({}), // 默认值。对象或数组的默认值必须从一个工厂函数返回。
		required：Boolean, // 是否是必传项
    validator: value => { // 自定义验证函数，将该 prop 的值作为唯一的参数代入。
      return boolean
    }
  }
}

prop传值

传入一个对象的所有 property：

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

<!--等价于-->
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

自定义类型：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}
props: {
  author: Person
}
<my-component :author="new Person('firstName', 'lastName')"></my-component>

通过 instanceof 来来验证 prop 的值是否是通过 new Person 创建的。

非 Prop 的 Attribute

一个非 prop 的 attribute 是指传向一个组件，但是该组件 prop 没有定义对应的 property。

对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件根元素设置好的值。庆幸的是，class 和 style attribute 会稍微智能一些，两边的值会被合并起来。

非 Prop 的 Attribute 通过 $attrs 来访问。 如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。

prop的“伪"双向绑定

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。也就是说，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值，但是，你不应该在一个子组件内部改变父组件传递的 prop。

子组件修改父组件的 prop，需要在父组件中监听一个事件，并根据需要更新一个本地的数据：

// 父组件：监听一个事件，用于更新本地的数据
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
// 子组件：触发父组件的监听事件，传递更新的值
this.$emit('update:title', newTitle)

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

// 父组件：.sync修饰符，相当于添加了一个 update:title 监听事件
<text-document v-bind:title.sync="doc.title"></text-document>

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。因为，有的情况下，你仍然需要对普通 DOM 元素进行底层操作。如：当页面加载时，该元素将获得焦点。

注册全局指令：

Vue.directive('focus', {
  bind: function (el, binding, vnode) {},
  inserted: function (el, binding, vnode) {
    el.focus()
  },
  update: function (el, binding, vnode, oldVnode) {},
  componentUpdated: function (el, binding, vnode, oldVnode) {},
  unbind: function (el, binding, vnode) {}
})

注册局部指令，在组件中定义 directives 选项：

directives: {
  focus: {
    inserted: function (el, binding, vnode) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property：

<input v-focus placeholder="自动聚集此元素">

钩子函数

一个指令定义对象可以提供如下几个钩子函数（均为可选）：

  • bind： 只调用一次，指令第一次绑定到元素时调用；

  • inserted： 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)；

  • update： 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。

  • componentUpdated： 指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind： 只调用一次，指令与元素解绑时调用。

钩子函数的参数

指令钩子函数会被传入以下参数：

  • el： 指令所绑定的元素，可以用来直接操作 DOM。除了 el 之外，其它参数都应该是只读的；

  • binding： 一个对象，包含以下 property：

    • name：指令名，不包括 v- 前缀；

    • value：指令绑定的值；

    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用；

    • expression：指令绑定的字符串形式的指令表达式；

    • arg：传给指令的参数。如 v-my-directive:foo 中，参数为 "foo"；

    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

  • vnode：当前虚拟节点。

  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

函数简写

如果只想在 bind 和 update 时触发相同行为，而不关心其它的钩子，可以这样写：

Vue.directive('my-directive', function (el, binding) {
  el.style.backgroundColor = binding.value
})

过滤器

自定义过滤器可被用于一些常见的文本格式化。比如：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>

全局定义过滤器：

Vue.filter('capitalize', function (value) {
  return value ? value.replace(/^\w/, a => a.toUpperCase()) : ''
})

局部定义过滤器，在组件的选项中定义 filters 选项：

filters: {
  capitalize: function (value) {
    return value ? value.replace(/^\w/, a => a.toUpperCase()) : ''
  }
}

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。同时，它可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

Vue API

Vue.use( plugin )

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

provide / inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：一个字符串数组，或一个对象。对象的 key 是本地的绑定名，value 可以是父组件中定义的 provide 中的 key，也可以是一个对象，包含 from、default 两个 property。

// 父组件
export default {
  provide () {
    return {
      provideInst: this
    }
  },
}

// 子组件
export default {
  inject: {
    aliasInst: {
      from: 'provideInst',
      default: () => ({})
    }
  },
}

model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

默认情况下：

<my-component v-model="name"></my-component>

相当于：

<my-component
	:value="name"
	@input="val => { name = val }"
></my-component>

如果我们在子组件 my-component 加入：

export default {
  model: {
    prop: 'testValue',
    event: 'change'
  },
}

那么：

<my-component v-model="name"></my-component>
<!--相当于-->
<my-component
	:testValue="name"
	@change="val => { name = val }"
></my-component>

v-on

绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名字或一个 Javascript 内联语句，还可以加对应修饰符（也可以省略）。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property ： v-on:click="handle('ok', $event)"。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰符的。

<my-component v-on:click="ckEvent"></my-component>
<my-component v-on:click="ckEvent('a', $event)"></my-component>
<my-component v-on:click.native="ckEvent"></my-component>
<my-component v-on:myEvent="doSomething"></my-component>
<my-component v-on="myEventObject"></my-component>
myEventObject: {
  click () => {},
	change () => {},
	myEvent () => {}
}

v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 prop 时，prop 必须在子组件中声明。

可以用修饰符指定不同的绑定类型。

  • .prop ： 作为一个 DOM property 绑定而不是作为 attribute 绑定，即不会传递到子组件的 $attrs；

  • .camel： (2.1.0+) 将 kebab-case attribute 名转换为 camelCase；

  • .sync： (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器；

    <text-document v-bind:title.sync="doc.title"></text-document>
<!--相当于-->
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<my-component v-bind="$props"></my-component>

key

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

常见问题

数据响应问题

  • 必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值；

  • Vue 不能检测对象的 property 的添加或移除： 由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

    对于已经创建的实例，可以使用 Vue.set(object, propertyName, value) 或 vm.$set 实例方法将 property 转换为响应式 。

  • Vue 不能检测数组的某些变化： 利用索引直接设置一个数组项时、修改数组的长度。

    同样，可以使用 Vue.set 或 vm.$set 来转换。

    另外，以下数组的变更方法会触发视图更新：push()、 pop()、 shift()、 unshift()、 splice()、 sort()、 reverse()。

异步更新问题

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么。比如：

<my-component id="MyComponent" v-if="visible"></my-component>
this.visible = true
const height = document.querySelector('#MyComponent').clientHeight

这种情况下，document.querySelector('#MyComponent') 很可能会报错，因为 this.visible = true 修改后，DOM 的更新是一个异步操作，也就是这个时候，DOM 是还不存在的。

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

this.visible = true
let height = null
this.$nextTick(() => {
	height = document.querySelector('#MyComponent').clientHeight  
})

为什么 data 必须是一个函数？

因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

为什么不推荐 v-for 与 v-if 一同使用？

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

<ul>
  <li v-for="user in users" :key="user.id" v-if="user.isActive">
    {{ user.name }}
  </li>
</ul>

假设 users 有100个子项，而user.isActive 的子项只有一个。实际执行中， li 将被循环100次，再通过 v-if 判断，过滤不符合条件的99个。从性能角度来看，这不太友好。

推荐做法，将 users 替换为一个计算属性，让其返回过滤后的列表：

computed: {
  activeUsers () => this.users.filter(u => u.isActive)
}
<ul>
  <li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

this作用域问题

  • 避免在 setTimeout、setInterval 内使用 this。因为，内部的 this 指向的不是 Vue 实例。

  • 不要在选项 property 或回调上使用箭头函数。

    created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

    因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

computed、watch、methods的区别

计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值，这个新值只会根据所依赖的值的变化而变化，简言之：这个属性依赖其他属性，由其他属性计算而来的。

同样，我们可以将一个计算属性定义为一个方法，在需要引用计算属性的地方直接调用该方法。两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的响应式依赖进行缓存的。也就是说，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，多处引用方法，每次都会再执行函数。

侦听属性监听 Vue 实例上的属性变化，或某些特定数据的变化，然后执行某些具体的业务逻辑操作。当属性变化时，回调函数自动调用，在函数内部进行计算。其可以监听的数据来源：data，props，computed 内的数据。

虽然计算属性在大多数情况下更合适，但有时也需要自定义的侦听属性。比如：当需要在数据变化时执行异步或开销较大的操作时、一个数据改变影响多个数据。

注意： 组件初始化时，如果 watch 对象的选项 immediate 值为 true，则该 watch 计算会先于 computed 计算，其执行顺序：beforeCreate -> watch -> created -> beforeMount -> computed（如果计算的属性未使用，则不会触发） -> mounted。

Vue 组件有哪些通信方式？

8 种常规的 Vue 组件通信方案：

  • 通过 props 传递。

  • 通过 $emit 触发自定义事件。

  • 使用 ref。

  • $parent 或$root。

  • $attrs 与 $listeners：逐级向下传属性 $attrs 和 $listeners。

  • Provide 与 Inject：在祖先组件定义 provide 属性，返回传递的值；在后代组件通过inject接收组件传递过来的值。

  • Vuex：共享数据中心。

  • EventBus（适用兄弟组件传值）：创建一个中央事件总线 EventBus，兄弟组件通过 $emit 触发自定义事件，另一个兄弟组件通过 $on 监听自定义事件。

    // Bus.js
class Bus {  
  constructor() {
    this.callbacks = {};
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];  
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));  
    }
  }
}

// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
// 另一种方式  
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能 
    <!-- Children1.vue -->
this.$bus.$emit('foo')
    <!-- Children2.vue -->
this.$bus.$on('foo', this.handle)

参考资料

Vue.js教程

上一页Vue3初步了解及迁移指南下一页React17.X原理篇

最后更新于