vue2 最后的倔强（知识点查漏补缺）

watch监听一个对象时，如何排除某些属性的监听
computed如何实现传参？
vue的hook的使用
Vue的el属性和$mount优先级？
动态指令和参数使用过吗？
相同的路由组件如何重新渲染？
自定义v-model
如何将获取data中某一个数据的初始状态？
为什么不建议v-for和v-if同时存在
计算变量时，methods和computed哪个好？

watch监听一个对象时，如何排除某些属性的监听

下面代码是，params发生改变就重新请求数据，无论是a，b，c，d属性改变

data() {return {params: {a: 1,b: 2,c: 3,d: 4},};},
watch: {params: {deep: true,handler() {this.getList;},},}

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

mounted() {Object.keys(this.params).filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听.forEach((_) => {this.$watch((vm) => vm.params[_], handler, {deep: true,});});},
data() {return {params: {a: 1,b: 2,c: 3,d: 4},};},
watch: {params: {deep: true,handler() {this.getList;},},}

computed如何实现传参？

// html
<div>{{ total(3) }}// js
computed: {total() {return function(n) {return n * this.num}},}

vue的hook的使用

同一组件中使用
这是我们常用的使用定时器的方式

export default{data(){timer:null  },mounted(){this.timer = setInterval(()=>{//具体执行内容console.log('1');},1000);}beforeDestory(){clearInterval(this.timer);this.timer = null;}
}

上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：

export default{methods:{fn(){let timer = setInterval(()=>{//具体执行代码console.log('1');},1000);this.$once('hook:beforeDestroy',()=>{clearInterval(timer);timer = null;})}}
}

父子组件使用
如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写：

//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {childMountedHandle() {// do something...}
},// 子组件
mounted () {this.$emit('childMounted')
},

使用hook的话可以更方便：

//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {childMountedHandle() {// do something...}
},

Vue的el属性和$mount优先级？

new Vue({router,store,el: '#app',render: h => h(App)
}).$mount('#ggg')

这是官方的一张图，可以看出el和$mount同时存在时，el优先级 > $mount

动态指令和参数使用过吗？

<template>...<aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>...data(){return{...someEvent: someCondition ? "click" : "dbclick",someProps: someCondition ? "num" : "price"}},methods: {handleSomeEvent(){// handle some event}}
</script>

相同的路由组件如何重新渲染？

开发人员经常遇到的情况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

const routes = [{path: "/a",component: MyComponent},{path: "/b",component: MyComponent},
];

如果依然想重新渲染，怎么办呢？可以使用key

<template><router-view :key="$route.path"></router-view>
</template>

自定义v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

如何将获取data中某一个数据的初始状态？

在开发中，有时候需要拿初始状态去计算。例如

data() {return {num: 10},
mounted() {this.num = 1000},
methods: {howMuch() {// 计算出num增加了多少，那就是1000 - 初始值// 可以通过this.$options.data().xxx来获取初始值console.log(1000 - this.$options.data().num)}}

为什么不建议v-for和v-if同时存在

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">{{item}}
</div>

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">{{item}}
</div>computed() {list() {return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)}}

计算变量时，methods和computed哪个好？

<div><div>{{howMuch1()}}</div><div>{{howMuch2()}}</div><div>{{index}}</div>
</div>data: () {return {index: 0}}
methods: {howMuch1() {return this.num + this.price}}
computed: {howMuch2() {return this.num + this.price}}

computed会好一些，因为computed会有缓存。例如index由0变成1，那么会触发视图更新，这时候methods会重新执行一次，而computed不会，因为computed依赖的两个变量num和price都没变。