vue2.x技术细节点分析（基础必会规则）

必会规则）"/>

vue2.x技术细节点分析（基础必会规则）

基础

基础语法的使用可以看vue的官方文档 vue官方文档

传值

props

/**
* 第一种方式，直接定义类型
* 可定义的类型 String、Number、Boolean、Function、Object、Array、Symbol
*/
props: {childKey: String	
}
// 支持定义多种类型
props: {childKey: [String, Number]	
}/**
* 第二种方式，定义对象
* 可配置 定义类型、默认值、校验函数、是否必传
*/
props: {childKey: {// 定义类型type: String,// 默认值default: "test",// 校验函数validator: value => {return ["one", "two", "three"].includes(value)},// 是否必传required: true}
}

v-model + $emit(“input”)

v-model是写组件常用的语法糖，绑定的同时实现了 :value 和 @input 的两步操作，子组件可以通过$emit(“input”, [value])来实现父子组件的双向数据流

dispatch和brodcast

基于组件树结构的查询和广播，用来解决嵌套多层的组件传值问题，需要结合$on使用

/**
* 遍历寻找所有子孙组件，假如子孙组件和componentName组件名称相同的话，则触发$emit的事件方法，数据为 params
* 如果没有找到 则使用递归的方式 继续查找孙组件，直到找到为止，否则继续递归查找，直到找到最后一个都没有找到为止
*/
function broadcast(componentName, eventName, params) {this.$children.forEach(child => {const name = child.$options.name;if (name === componentName) {child.$emit.apply(child, [eventName].concat(params));} else {broadcast.apply(child, [componentName, eventName].concat([params]));}});
}
export default {methods: {// 查找所有父级，直到找到要找到的父组件，并在身上触发指定的事件dispatch(componentName, eventName, params) {let parent = this.$parent || this.$root;let name = parent.$options.name;while (parent && (!name || name !== componentName)) {parent = parent.$parent;if (parent) {name = parent.$options.name;}}if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}},broadcast(componentName, eventName, params) {broadcast.call(this, componentName, eventName, params);}}
};

指令

v-for

• key是一定要加的，key可以最大限度的保留缓存
• 拿列表举例，想实现保留缓存就用index值作为key，想实现不同的行数据单独刷新就用自定义的key值
• 如果想重新渲染循环内某一个组件时，可以通过更改值对应的key值来实现
• v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，尽量不要混用

computed

computed和methods是一对，computed会额外保留计算缓存，有一点要注意，computed是只读属性

watch

// 第一种 可以直接监听
watch: {childKey(value, oldValue){console.log(`监听到值value:${value}, oldValue:${oldValue}`)}
}
/**
* 第二种，结合handler使用
* 可选择配置deep和immediate
*/
watch: {childKey: {handler(value, oldValue){console.log(`监听到值value:${value}, oldValue:${oldValue}`)},// 默认不会深度监听，可配置deep为true实现深度值的监听，配置了deep要注意性能问题deep: true,// 默认在值变化后才会监听，想在页面挂载时就执行handler函数，可以配置immediate为trueimmediate: true}
}
// 可配置监听对象的某一个属性，对象的监听尽量到某一个属性值，少用deep
watch: {"childKey.firstKey": {handler(value, oldValue){console.log(`监听到值value:${value}, oldValue:${oldValue}`)},}
}

数组变更

• Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化，这一点要注意
• 如果想用数组下标赋值时要注意，尽量不用这种方式 this.arrTest[1].testKey = 1，需要用的话使用

 $set赋值// 给arrTest的1下标赋值对象this.$set(this.arrTest, 1, {a: 0, b: 1, c: 2})

vuex

// 映射到页面两种方式
// 第一种 $store.state
computed: {// 放在计算属性里store的state的值变化这里可以直接拿到stateValue(){return this.$store.state.stateValue}
}// 第二种 mapState
import {mapState} from "vuex"
computed: {// 放在计算属性里store的state的值变化这里可以直接拿到...(["stateValue"])
}// 也可以直接取值
this.$store.state.stateValue

vue-router

• 动态添加router时要注意router添加后this.$ route.options不会自动更新，需要手动添加进去才能保证其他地方通过this.$ route.options取值能取到
• keep-alive
  • keep-alive可以有效缓存一级，二级的路由菜单，三级以上菜单并不能做到缓存，可以在router初始化时把超过二级的菜单转换成一级或二级路由
  • 可以通过更改router-view的key值达到更改路由缓存的效果

参考资源

• vue官方文档
• iview源码