vue项目 获取不到元素、数据渲染失效？

vue项目 获取不到元素、数据渲染失效？

一、获取元素

非第三方库的元素

• 给元素绑定ref

 <div ref="main"></div>

• 通过$ref获取元素

// 如 echarts 初始化
this.$echarts.init(this.$refs.main)

• 如遇到异步、（操作DOM之前，元素还未被挂载）等情况

// 如 echarts 与 <el-tabs> 组合的渲染
// 通过vue API vm.$nextTick
this.$nextTick(function () {
      //...
})
// 或者通过时间延迟，直到元素被挂载后，再操作DOM
setTimeout(() => {
      //...
}, 300);

第三方库的元素
通过F12 获取元素路径，即使用常规操作

二、数据渲染

数据修改了，没有显示？
参考vue官方文档（深入响应式原理）

_.assign 和 Object.assign 相同，参考lodash

// 将后面一坨数据，浅复制给空对象{}，并重新赋值，能实现数据监听
this.initData = _.assign({}, this.initData, {
    checkMeals, checkGroups, allAge,
    pager: { ... this.initData.pager, total: 100, }
})

这里yao注意浅复制存在引用的问题（一处修改，他处同步变化），可用通过深克隆解决
_.cloneDeep

this.insertOrUpdateDialog = _.assign({}, this.insertOrUpdateDialog, {
  data, title, visible: true, resetDefault: _.cloneDeep(data)
})

JSON.parse(JSON.stringify(data))

this.insertOrUpdateDialog = _.assign({}, this.insertOrUpdateDialog, {
  data, title, visible: true, resetDefault: JSON.parse(JSON.stringify(data))
})

• 2024.1.12