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为true
		immediate: 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源码