脚本宝典收集整理的这篇文章主要介绍了vue开发优化方法【基于vue2】【续1】，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

3.6 parent 和 children

parent:父实例 children:子实例 //父组件 mounted(){ console.log(this.$children) //可以拿到 一级子组件的属性和方法 所以就可以直接改变data,或者调用methods方法 } //子组件 mounted(){ console.log(this.$parent)//可以拿到parent的属性和方法 } children和parent并不保证顺序，也不是响应式的，只能拿到一级父组件和子组件

3.7 $refs

父组件
<home ref='home'/>
mounted(){
	console.log(this.$refs.home)//即可拿到子组件的实例，就可以直接操作data和methods
}

3.8 $root

//父组件
mounted(){
	console.log(this.$root)//获取根实例，最后所有组件都是挂载到根实例上
	console.log(this.$root.$children[0]) //获取根实例的一级子组件
	console.log(this.$root.$children[0].$children[0])//获取根实例的二级子组件
}

3.9 .sync

在vue@1.x的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值，在vue@2.0的时候由于违背单项数据流的设计被干掉了；在vue@2.3.0+以上版本又重新引入了这个.sync修饰符： 父组件 编译时会被扩展为 <home :title='title' @update:title='val=>title=val'/> //子组件 //所以子组件可以通过$emit触发update方法改变 mounted(){ this.$emit('update:title','这是新的title') }

3.10 v-slot

2.6.0新增 1、slot,slot-cope,scope在2.6.0中都被废弃，但未被移除 2.作用就是将父组件的template传入子组件 3.插槽分类A.；匿名插槽（也叫默认插槽）：没有命名，有且只有一个； B.具名插槽：相对匿名插槽组件slot标签带name命名的；

C.作用域插槽：子组件内数据可以被父页面拿到（解决了数据只能从父页面传递给子组件） 父组件 //slotProps 可以随意命名 //slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user='user'

// 子组件

3.11 EventBus

1.就是声明一个全局Vue实例变量EventBus，把所有的通信数据，时间监听都存储到这个变量上； 2.类似vuex。但这种方式只适用于极小的项目3.原理就是利用on和emit并实例化一个全局

vue实现数据共享 在main.js中 Vue.prototype.$eventBus = new Vue() //传值组件 this.$eventBus.$emit('eventTarget','这是eventTarget传过来的值')

接收组件
this.$eventBus.$on("eventTarget",v=>{
console.log('eventTarget',v);//这是eventTarget传过来的值
})

4.可以实现平级，嵌套组件传值，但是对应的事件名eventTarget必须是全局唯一的

3.12 Vie.observable

2.6.0新增用法：让一个对象可响应。observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函数viewModule对象中的属性，从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内，并且会发生改变时触发相应的更新。

总结： 1、体量比vuex小，使用维护成本相对较低 2、用于数据共享，当十几个组件同时共用一套数据时，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新。

render函数

1.场景：有些代码在template里面写会重复很多，所以这个时候render函数就有作用了

2.render和template的对比

• render适合复杂逻辑，属于自定义Render函数，性能较高
• template适合逻辑简单，属于声明式渲染，性能较低

5.异步组件

场景：项目过大就会导致加载缓慢，所以异步组件实现按需加载就是必须要做的事了 1、异步注册组件的3种方法 //工厂函数执行 resolve回调 Vue.component('async-webpack-example',function(resolve){ //这个特殊的require语法将会告诉webpack //自动将你的构建代码切割成多个包，这些包会自动通过Ajax请求加载 require(['./my-async-component'],resolve) })

//工厂函数返回Promise
Vue.component(
	'async-webpack-example',
	//这个`import`函数会返回一个`Promise`对象
	()=> import('./my-async-component')
)

//工厂函数返回一个配置化组件对象
const AsyncComponent = ()=>({
	//需要加载的组件（应该是一个`Promise`对象）
	component: import('./MyComponent.vue'),
	//异步组件加载时使用的组件
	loading:LoadingComponent,
	//加载失败时使用的组件
	error:ErrorComponent,
	//展示加载时组件的延时时间。默认值是200（毫秒）
	delay:200,
	//如果提供了超时时间且组件加载也超时了，
	//则使用加载失败时使用的组件。默认值是：`Infinity`
	timeout:3000
})

异步组件的渲染本质上其实就是执行2次或者2次以上的渲染，先把当前组件渲染为注释节点，当组件加载成功后，通过foreceRender执行重新渲染。或者是渲染为注释节点，然后再渲染为loading节点，在渲染为请求完成的组件 2.路由的按需加载

import()方法由es6提出，import()方法是动态加载，返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。

6.动态组件

场景：做一个tab切换时就会牵涉到组件动态加载

但是这样每次组件都会重新加载，会消耗大量性能，所以使用keep-alive就起到了作用

这样切换效果没有动画效果，这个也不用着急，可以利用内置的

7.components和 Vue.component

8.Vue.extend

场景：vue组件中有些需要将一些元素挂载到元素上，这个时候extend就起到作用了，是构造一个组件的语法器 写法： //创建构造器

9.mixins

场景：有些组件有些重复的js逻辑，如校验手机验证码，解析时间等，mixins就可以实现这种混入mixins值是一个数组

10.extends

extends用法和mixins很相似，只不过接收的参数是简单的选项对象或构造函数，所以extends只能单次扩展一个组件 const extend={ created(){ this.dealTime() }, methods:{ dealTime(){ console.log('这是mixin的dealTime里面的方法'); } } } export default{ extends:extend }

11.Vue.nextTick

2.1.0新增 场景：页面加载时需要让文本框获取焦点 用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM mounted(){//因为mounted阶段dom并未渲染完毕，所以需要$nextTick this.$nextTick(()=>{ this.$refs.inputs.focus()//通过$refs获取dom并绑定focus方法 } }

12.Vue.directive

12.1使用 场景：官方给我们提供了很多指令，但是我们如果想将文字变成指定的颜色定义成指令使用，这个时候就需要用到Vue.directive //全局自定义指令 Vue.directive("change-color",function(el,binding,vnode){ el.style["color"] = binding.value; })

12.2生命周期 1.bind只调用一次，指令第一次绑定到元素的时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。 2.inserted:被绑定的元素插入父节点的时候调用（父节点存在即可调用，不必存在document中） 3.update:被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新 4.componentUpdate:被绑定的元素所在模板完成一次更新更新周期的时候调用 5.unbind:只调用一次，指令元素解绑的时候调用

13.Vue.filter【vue3中已被废弃】

14 Vue.compile

场景：在render函数中编译模板字符串。只在独立构建时有效

15 Vue.version

场景：有些开发插件需要针对不同vue版本做兼容，所以就回用到Vue.version用法：Vue.version()可以获取vue版本 var version = Number(Vue.version.split('.')[0]) if(version=3){ //vue v3.x }else if(version=2){ //vue vue2.x.x }else if(version===1){ //vue v1.x.x }else{ // Unsupported versions of Vue }

16.Vue.set()

场景：当你利用索引直接设置一个数组项时或你修改数组的长度时，由于Object.defineprototype()方法限制，数据不响应式更新 不过vue.3.x将利用proxy这个问题将得到解决 解决方案：

17.Vue.config.keyCodes

场景：自定义按键修饰符别名 //将键码为113定义为f2 Vue.config.keyCodes.f2 = 113;

18.v-pre

场景：vue是响应式系统，但是有些静态的标签不需要多次编译，这样可以节省性能

19.v-cloak

场景：在网速慢的情况下，在使用vue绑定数据的时候，渲染页面时会出现变量闪烁 用法：这个指令保持在元素上知道关联实例结束编译。和css规则如： [v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕

20.v-once

场景：有些template中的静态dom没有改变，这时就只需要渲染一次，可以降低性能开销

v-once和v-pre的区别：v-once只渲染一次；v-pre不编译，原样输出

21.事件修饰符

.stop:阻止冒泡
.prevent:阻止默认行为
.self:仅绑定元素自身触发
.once:2.1.4新增，只触发一次
.passive:2.3.0新增，滚动事件的默认行为(即滚动行为)将会立即触发，不能和.prevent一起使用

22.按键修饰符和按键码

//对应键盘上的关键字
.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

脚本宝典总结

以上是脚本宝典为你收集整理的vue开发优化方法【基于vue2】【续1】全部内容，希望文章能够帮你解决vue开发优化方法【基于vue2】【续1】所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。