1.watch 深度监听
// 监听--对象属性值-可以是父子穿值===immediate监听深度监听 deep: true, immediate: true
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true
rowtablePolicyDetails: {
handler(newVal, old) {
console.log(newVal)
},
deep: true,
immediate: true
},
2.如何处理精度丢失 浏览器对于十进制的运算计算不够优好,为了处理这个bug我们引入big.js 此处已经挂在到了Vue的原型上,直接用就ok了big.js常用操作及引用方法_铃儿响叮当-CSDN博客
## demo
```js
const x = new this.$Big(0.3);
console.log(x.valueOf(), '自己本身') // 0.3
console.log(x.plus(0.1).valueOf(), '加') // 0.4
console.log(x.minus(0.1).valueOf(), '减法') // 0.2
console.log(x.times(100).valueOf(), '乘') // 30
console.log(x.div(100).valueOf(), '除') // 0.003
3.vue 种作用域插槽问题
1.判断插槽是否存在 $slots['labelbottom']
<div
v-if="$slots['labelbottom']"
:style="{ 'padding-left': node.level * tree.indent + 6 + 'px' }"
class="slot-tree-label"
>
<slot name="labelbottom"></slot>
</div>
2.作用域插槽-当前的数据
<div
:style="{ 'padding-left': node.level * tree.indent + 5 + 'px' }"
class="slot-tree-label"
>
<slot
name="labelbottom"
:node="node.data"
></slot>
</div>
3.挂载到父组件-通过slot-scope="scope" 与table表格类似
<el-tree-node
v-for="child in root.childNodes"
:key="getNodeKey(child)"
:node="child"
:props="props"
:render-after-expand="renderAfterExpand"
:show-checkbox="showCheckbox"
:render-content="renderContent"
@node-expand="handleNodeExpand"
>
<template
slot="labelbottom"
slot-scope="scope"
>
<slot
name="labelbottom"
:node="scope.node"
></slot>
</template>
</el-tree-node>