全局 API

Vue.directive

Vue 中有很多内置指令，除了内置指令外还可以根据需求使用 Vue.directive 注册自定义指令。

Vue.directive 的基本用法：

<divid="app"><inputtype="text"v-指令名称="指令的值"></div><script>// Vue.directive()：自定义指令// 参数1：自定义指令名称// 参数2：指令的配置对象Vue.directive('name',{// inserted：指令生命周期钩子函数，元素第一次插入页面中时触发// el：使用指令的元素本身// binding：指令的配置信息// binding.value：指令的值inserted(el,binding){// 指令操作}})</script>

示例：Vue.directive

入口页面（index.html）：

<divid="app"><inputtype="text"v-focus="true"></div><script>Vue.directive('focus',{inserted(el,binding){if(binding.value){// 获取焦点el.focus();}}})letvm=newVue({el:'#app'})</script>

示例效果：

Vue.use

Vue.use 主要用于在 Vue 中安装插件，通过插件可以为 Vue 添加全局功能。

Vue.use 会自动阻止多次安装同一个插件，因此，当在同一个插件上多次调用 Vue.use 时实际只会被安装一次。

Vue.js 官方提供的一些插件（如 vue-router）在检测到 Vue 是可访问的全局变量时，会自动调用 Vue.use，但在 CommonJS 等模块环境中（如 Node.js 等），始终需要 Vue.use 显式调用。

Vue.use 的基本用法：

// 定义插件对象letpluginObj={}// 为插件提供install方法// Vue：Vue实例对象// option：插件参数pluginObj.install=function(Vue,option){// ...}// Vue.use()：安装插件// 参数1：插件对象// 参数2：插件配置参数Vue.use(pluginObj,{// ...})

示例：Vue.use

入口页面（index.html）：

<divid="app"><demo-component></demo-component></div><script>letMyPlugin={}MyPlugin.install=function(Vue,option){Vue.component('demo-component',{data(){return{message:option.message}},template:'<h1>这是插件内定义的组件，参数为：{{option.message}}</h1>'})}Vue.use(MyPlugin,{message:'hello, plugin'})letvm=newVue({el:'#app'})</script>

示例效果：

Vue.extend

Vue.extend 用于基于 Vue 构造器创建一个 Vue 子类，可以对 Vue 构造器进行扩展。

Vue.extend 的基本用法：

// Vue2继承Vue，并实现某些特性letVue2=Vue.extend({// data：在Vue.extend()中使用时只能是一个函数data(){return{// ...}},methods:{// ...}})

示例：Vue.extend

入口页面（index.html）：

<divid="app1">title：{{title}}</div><divid="app2">title：{{title}}</div><script>// Vue2继承Vue，并实现某些特性letVue2=Vue.extend({// data：在Vue.extend()中使用时只能是一个函数data(){return{title:'Vue2的标题'}},methods:{}})letvm1=newVue({el:'#app1',})letvm2=newVue2({el:'#app2',})</script>

示例效果：

Vue.set

Vue.set 用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新，主要用于解决在 Vue 实例创建后，向现有对象添加新属性或修改现有属性的值的情况。

Vue.set 的基本用法：

// target：要添加或修改属性的目标对象// key：要添加或修改的属性键// value：要设置的属性值Vue.set(target,key,value);

示例：Vue.set

入口页面（index.html）：

<divid="app">name: {{user.name}}<br>age: {{user.age}}</div><script>letvm=newVue({el:'#app',data:{user:{name:'张三'}}})Vue.set(vm.user,'age','18')setTimeout(function(){Vue.set(vm.user,'age','28')},3000)</script>

示例效果：

Vue.mixin

Vue.mixin 用于全局注册一个混入（Mixins），它将影响之后创建的每个 Vue 实例。

Vue.mixin 的基本用法：

// 参数1：混入的对象，包含要在组件中共享的属性、方法或生命周期钩子Vue.mixin({data(){return{// ...}}})

示例：Vue.mixin

入口页面（index.html）：

<divid="app">msg：{{msg}}</div><script>Vue.mixin({data(){return{msg:'混入的数据'}},created(){console.log('混入的created')}})letvm=newVue({el:'#app',created(){console.log('Vue实例自身的created')}})</script>

示例效果：

实例属性

vm.$props

vm.$props 属性用于接收上级组件向下传递的数据。

示例：vm.$props

入口页面（index.html）：

<divid="app"><h3>父组件</h3>请输入要传递给子组件的内容：<inputv-model="msg"><my-component:msg="msg"></my-component></div><script>letvm=newVue({el:'#app',data:{msg:""},components:{myComponent:{props:['msg'],template:'<div>父组件传递给子组件的内容：{{msg}}</div>',watch:{msg(){// this.$props.msg：获取父组件传递给子组件的参数msg// 也可以使用this.msg获取console.log("监听到父组件传递给子组件的内容是："+this.msg)}}}}})</script>

示例效果：

vm.$options

Vue 实例初始化时，除了传入指定的选项外，还可以传入自定义选项，自定义选项的值可以是数组、对象、函数等。

vm.$options 属性用于获取 Vue 实例中的自定义选项，自定义选项不具有响应特性。

示例：vm.$options

入口页面（index.html）：

<divid="app"><button@click="getOption">获取自定义选项</button></div><script>letvm=newVue({el:'#app',customOption:'我是自定义数据',methods:{getOption(){console.log(this.$options.customOption)}}})</script>

示例效果：

vm.$el

vm.$el 用于访问 Vue 实例使用的根 DOM 元素。

示例：vm.$el

入口页面（index.html）：

<divid="app"><p>原来的HTML</p></div><script>letvm=newVue({el:'#app'})vm.$el.innerHTML="<h3>new html</h3>"</script>

示例效果：

vm.$children

vm.$children 属性用于获取当前实例的直接子组件，其获取的直接子元素并不保证按顺序，也不是响应式的。

示例：vm.$children

入口页面（index.html）：

<divid="app"><button@click="click">获取子组件</button><my-child>1</my-child><my-child>2</my-child></div><script>Vue.component('my-child',{template:'<h3>子组件<slot></slot></h3>'})letvm=newVue({el:'#app',methods:{click(){console.log(this.$children)}}})</script>

示例效果：

vm.$root

vm.$root 属性用于获取当前组件树的根 Vue 实例，如果当前实例没有父实例，则获取到的是该实例本身。

示例：vm.$root

入口页面（index.html）：

<divid="app"><my-component></my-component></div><script>Vue.component('my-component',{template:'<button @click="click">查看根实例</button>',methods:{click(){// 判断当前组件的根实例和vm实例是否一致console.log(this.$root==vm.$root)}}})letvm=newVue({el:'#app'})</script>

示例效果：

vm.$slots

vm.$slots 属性用于获取组件的插槽。

示例：vm.$slots

入口页面（index.html）：

<divid="app"><my-component><templatev-slot:slot01><div>Hello，Vue</div></template><templatev-slot:slot02><div>Hello，Component</div></template><templatev-slot:slot03><div>Hello，Slots</div></template></my-component></div><templateid="myTemplate"><div><slotname="slot01"></slot><slotname="slot02"></slot><slotname="slot03"></slot></div></template><script>Vue.component('my-component',{template:'#myTemplate',created(){console.log(this.$slots)}})letvm=newVue({el:'#app'})</script>

示例效果：

vm.$attrs

vm.$attrs 属性用于获取组件的属性，获取的属性不包括 class、style、被声明为 props 的属性。

示例：vm.$attrs

入口页面（index.html）：

<divid="app"><my-componentid="test"class="test"name="hello"></my-component></div><script>Vue.component('my-component',{template:'<button @click="showAttrs">查看组件属性</button>',methods:{showAttrs(){console.log(this.$attrs)}}})letvm=newVue({el:'#app'})</script>

示例效果：

vm.$refs

vm.$refs 属性用于获取和修改页面内容，但一般情况下 Vue 不推荐直接使用 $refs 修改页面的内容。

示例：vm.$refs

入口页面（index.html）：

<divid="app"><divid="box"ref="box">hello vue</div></div><script>letvm=newVue({el:'#app',mounted(){console.log(document.getElementById('box').innerHTML)console.log(this.$refs.box.innerHTML)}})</script>

示例效果：

全局配置

productTip

productionTip 属性用于设置在开发环境下（vue.js）是否开启提示信息。

productionTip 的基本用法：

Vue.config.productionTip=false|true;

在某些 Vue.js 版本中，通过 productionTip 属性无法关闭提示信息，其原因在于 vue.js 文件本身也有一个 productionTip 属性，在加载时，优先生效。

因此在开发环境中如果要关闭提示信息，还需要注意 vue.js 文件中的配置。

silent

silent 属性用于设置是否取消 Vue 日志和警告。

silent 的基本用法：

Vue.config.silent=true|false;

devtools

devtools 属性用于设置是否允许使用 vue-devtools 进行调试。

devtools 的基本用法：

Vue.config.devtools = true | false;

组件进阶

mixins

mixins 是一种分发 Vue 组件中可复用功能的方式。

mixins 的基本用法：

letvm=newVue({el:'#app',// mixins：混入对象mixins:{data(){return{// ...}}},// 组件data优先级 > 混入data优先级data:{// ...},// 组件钩子函数优先级 < 混入钩子函数优先级created(){// ...}})Vue.component('my-component',{template:'',mixins:{// ...}})

虚拟 DOM

在 Vue 2 中，引入了虚拟 DOM（Virtual DOM），虚拟 DOM 是使用 JavaScript 对象来对真实 DOM 进行描述的一种技术。

虚拟 DOM 的主要作用：

• 提高 DOM 操作的性能：大部分情况下，使用 JavaScript 去操作跨线程的庞大 DOM 需要较高的性能，而虚拟 DOM 可以降低这一成本。
• 实现服务器端渲染（SSR）和跨端使用：虚拟 DOM 可以用于 SSR 以及跨端使用。

虚拟 DOM 的表达方式就是把每一个标签都转为一个对象，其基本形式为：

{'标签',props:{// 标签上的属性和方法},children:[// 标签的内容或者子节点]}

示例：虚拟 DOM

在 Vue 中，有一个 template 模板：

<template><divid="box"class="container"><h1>Hello，Vue</h1></div></template>

该模板用虚拟 DOM 表示为：

{'div',props:{id:'box',class:'container'},children:[{tag:'h1',children:'Hello，Vue'}]}

render + createElement

在 Vue 中可以使用 render 函数实现对虚拟 DOM 的操作，在 render 函数的返回值中，需要调用 createElement 函数来创建元素。

createElement 函数返回的并不是一个实际的 DOM 元素，它返回的其实是一个描述节点，用来告诉 Vue 在页面上需要渲染什么样的节点，描述节点称为虚拟节点（Virtual Node，VNode）。

示例：render + createElement

入口页面（index.html）：

<divid="app"><my-component></my-component></div><script>Vue.component('my-component',{render(createElement){returncreateElement('p',{style:{color:'aqua'}},'成功渲染')}})letvm=newVue({el:'#app',})</script>

示例效果：

diff 算法

diff 算法（在 Vue 中称之为 patch）是一种针对两颗虚拟 DOM 进行对比，查找其中的差异，然后根据差异性来更新页面的算法，其核心参考了 Snabbdom 原理。

diff 算法的特性：深度优先，同层级比较。

• 只比较同一层级的标签，不跨级比较。
• 如果同一层级的比较标签名不同，就直接移除老的虚拟 DOM 对应的节点，不继续按这个树状结构做深度比较。
• 如果标签名相同，绑定的 key 属性的值也相同，就会认为是相同节点，也不继续按这个树状结构做深度比较。故在使用 v-for 遍历列表时，需要绑定一个 key 属性以提高遍历效率。