vue.js开发优化技巧（持续更新）

1、使用this.$option.data()重置数据

export default {
    props: {
        P: Object
    },
    data () {
        return {
            A: {
                a: this.methodA
            },
            B: this.P
        };
    },
    methods: {
        resetData () { // 更新时调用
            Object.assign(this.$data, this.$options.data()); // 有问题！！！
        },
        methodA () {
            // do sth.
        },
        methodB () { // 通过用户操作调用
            this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined！！！
        }
    }
}


resetData () { // 更新时调用
		// 正常使用
		Object.assign(this.$data, this.$options.data())
		// 如果data中引用了props，methods等其他this里面的属性，需要用call方法绑定一下当前this
    Object.assign(this.$data, this.$options.data.call(this))
}

2、使用Object.freeze()冻结对象/数组，阻住vue将其变为响应式对象，提升性能（适用于不需要响应式的场景）

/**
* @description 查询检查项目详情
*/
async getItemDetils() {
  this.$toast.loading('加载中...')
  const { data: { resultCode, content } } = await getItemDetils(this.item.packageItemId)
  if (resultCode === 0) {
    this.$toast.clear()
    this.itemDetail = Object.freeze(content)
  }
},

3、计算属性使用解构方式注入参数

computed: {
        columns({ list, keyword }) {
				// const list = this.list
				// const keyword = this.keyword
            return keyword ? list.filter(i => i.mainPartName.includes(keyword)) : list
        }
}

4、使用this.$attrs获取多个props

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

5、使用.sync操作符，不打破单向数据流让子组件修改父组件的数据

// 父组件
<home :title.sync="title" />
//编译时会被扩展为
<home :title="title"  @update:title="val => title = val"/>

// 子组件
// 所以子组件可以通过$emit 触发 update 方法改变
mounted(){
  this.$emit("update:title", '这是新的title')
}

6、数据更新后视图没有发生变化的处理方案

1、this.$forceUpdate()

2、this.$set()

3、修改key值，diff算法
// 数据更新update视图的时候会比较新旧节点是否为相同节点
function sameVnode(a, b) {
  return (
    a.key === b.key &&
    a.asyncFactory === b.asyncFactory &&
    ((a.tag === b.tag &&
      a.isComment === b.isComment &&
      isDef(a.data) === isDef(b.data) &&
      sameInputType(a, b)) ||
      (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error)))
  )
}