vue项目-实战技巧（一）
二、小项目不使用vuex,使用vue.observable来进行状态管理。
三、深度watch与watch立即触发回调，我可以监听你的一举一动
（1）内部监听组件的生命周期函数，列如在组件中使用echarts,一般情况都是如下方式
<template> <div id='echarts'></div> </template> <script> export default { data:function(){}, mounted(){ this.chart=echart.init(this.$el); window.addEventListener('resize',this.$_handleResizeChart) }, updated(){ // 执行了一系列代码 }, create(){ // 执行了一系列代码 }, beforeDestroy(){ // 组件销毁的时候，销毁监听事件 window.removeEventListener('resize',this.$_handleResizeChart) }, methods:{ $_handleResizeChart(){ this.chart.resize() } } } </script>
这样写是没有问题的，但是添加事件和销毁事件之间隔了很多行的代码，往往会忘记销毁事件，我们可以使用hook来将事件监听和事件销毁放在一起，这样有利于可读性，也防止了忘记销毁事件。
export default { mounted() { this.chart = echarts.init(this.$el) // 请求数据，赋值数据 等等一系列操作... // 监听窗口发生变化，resize组件 window.addEventListener('resize', this.$_handleResizeChart) // 通过hook监听组件销毁钩子函数，并取消监听事件 this.$once('hook:beforeDestroy', () => { window.removeEventListener('resize', this.$_handleResizeChart) }) }, updated() {}, created() {}, methods: { $_handleResizeChart() { // this.chart.resize() } } }
可以使用$on,$once来监听组件的生命周期钩子，如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})
（2）外部监听组件的生命周期函数
如果是使用第三方的组件，我们需要监听这个第三方组件的生命周期钩子函数，可以使用@hook来监听第三方组件的生命周期钩子函数，如下：
<template> <!--通过@hook:updated监听组件的updated生命钩子函数--> <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发--> <custom-select @hook:updated="$_handleSelectUpdated" /> </template> <script> import CustomSelect from '../components/custom-select' export default { components: { CustomSelect }, methods: { $_handleSelectUpdated() { console.log('custom-select组件的updated钩子函数被触发') } } } </script>
二、小项目不使用vuex,使用vue.observable来进行状态管理。
vuex通常是用于大型的vue项目进行状态管理的，如果是小型的项目，可以使用Vue.observable来创建一个状态管理。
Vue.observable是2.6提供的新API.它可以让一个对象可响应，Vue内部使用它来处理data函数返回的数据。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器
（1）创建store
import Vue from 'vue' // 通过Vue.observable创建一个可响应的对象 export const store = Vue.observable({ userInfo: {}, roleIds: [] }) // 定义 mutations, 修改属性 export const mutations = { setUserInfo(userInfo) { store.userInfo = userInfo }, setRoleIds(roleIds) { store.roleIds = roleIds } }
（2）在组件中使用
<template> <div> {{ userInfo.name }} </div> </template> <script> import { store, mutations } from '../store' export default { computed: { userInfo() { return store.userInfo } }, created() { mutations.setUserInfo({ name: '子君' }) } } </script>
三、深度watch与watch立即触发回调，我可以监听你的一举一动
在开发vue项目的时候，我们通常使用watch来监听数据的改变，然后在变化的时候做一系列的操作。
（1）基础用法：比如一个列表页，我们希望在搜索关键字的时候就可以触发搜索，此时除了监听搜索框的change 事件外，还可以通过watch 监听搜索关键字的变化。
<template> <!--此处示例使用了element-ui--> <div> <div> <span>搜索</span> <input v-model="searchValue" /> </div> <!--列表，代码省略--> </div> </template> <script> export default { data() { return { searchValue: '' } }, watch: { // 在值发生变化之后，重新加载数据 searchValue(newValue, oldValue) { // 判断搜索 if (newValue !== oldValue) { this.$_loadData() } } }, methods: { $_loadData() { // 重新加载数据，此处需要通过函数防抖 } } } </script>
（2）立即触发
如果我们想要在页面初始化的时候加载数据，我们还可以在created 或者mounted 生命周期钩子函数里面再次调用$_loadDate方法，不过，我们也可以通过配置 watch 的立即触发属性，就可以满足了
// 改造watch export default { watch: { // 在值发生变化之后，重新加载数据 searchValue: { // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined handler(newValue, oldValue) { if (newValue !== oldValue) { this.$_loadData() } }, // 配置立即执行属性 immediate: true } } }
（3）深度监听
一个表单页面，需求希望用户在修改表单的任意一项之后，表单页面就需要变更为被修改状态。如果按照上例中watch的写法，那么我们就需要去监听表单每一个属性，太麻烦了，这时候就需要用到watch的深度监听deep
export default { data() { return { formData: { name: '', sex: '', age: 0, deptId: '' } } }, watch: { // 在值发生变化之后，重新加载数据 formData: { // 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等 handler(newValue, oldValue) { // 在这里标记页面编辑状态 }, // 通过指定deep属性为true, watch会监听对象里面每一个值的变化 deep: true } } }
（4）随时监听，随时取消
watch去监听表单数据(假设是formData),如上例所述，但对于编辑表单来说，表单需要回填数据，这时候会修改formData的值，会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watchexport default { data() { return { formData: { name: '', age: 0 } } }, created() { this.$_loadData() }, methods: { // 模拟异步请求数据 $_loadData() { setTimeout(() => { // 先赋值 this.formData = { name: '子君', age: 18 } // 等表单数据回填之后，监听数据是否发生变化 const unwatch = this.$watch( 'formData', () => { console.log('数据发生了变化') }, { deep: true } ) // 模拟数据发生了变化 setTimeout(() => { this.formData.name = '张三' }, 1000) }, 1000) } } }
根据上例可以看到，我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢，上例中this.$watch返回了一个值unwatch,是一个函数，在需要取消的时候，执行 unwatch()即可取消
（1）针对ui特有的数据字段进行判断（也叫数据模型方法）
这样数据的要求比较高，需要针对class 进行特征性的组件的渲染，当你需要改变时改变数据就可以到达改变样式的目的。
<template> <div> <li v-for="item of list" :key="item.id" :class="item.status ? 'color' : ''" @click="changeColor(item.id)" ></li> </div> </template> <script> export default { data: function () { return { list: [ { id: 1, status: true, name: "111" }, { id: 2, status: true, name: "222" }, ], }; }, methods: { changeColor(id) { this.list.map = (item) => { if (item.id == id) { item.status = !item.status; } }; }, }, }; </script>
（2）传入对应的数据和事件源，从而判断是否添加样式，特点更加灵活，也可以根据需要传入你需要传入的item属性参数进行与class的匹配判断，不用改变接口返回的数据结构。
<template> <div> <li v-for="item of list" :key="item.id" @click="changeColor($event)" >{{item.name}}</li> </div> </template> <script> export default { data: function () { return { list: [ { id: 1, status: true, name: "111" }, { id: 2, status: true, name: "222" }, ], }; }, methods: { changeColor(e) { // 获取触发当前事件的事件源 let el=e.target; // 判断里面是否有样式，如果有的话就移除，如果没有的话就添加样式 if(e.classList.contains('color')){ e.classList.remove('close') }else{ el.classList.add('color') } }, }, }; </script>
问题：如果你的计算属性依赖于data的部分，而你的data对应的字段在data里没有申明，只是在请求接口时进行申明赋值，那么当接口请求时，虽然数据发生了变化，但是计算属性的值不会发生更新。
解决方法：在data里面申明依赖的属性，哪怕是空或者null。
问题：定义了输入框的blur 事件，再默认按钮点击click事件，但是由于 blur 事件提前于 click 事件，当只想执行点击事件，而不执行 blur 事件的时候该怎么做？
解决方法：
（1）可以把点击事件 click 改为 @mousedown.prevent, 前者是提前于 blur 事件，后者是阻止 blur 事件的发生。
（2）el-input并不生效，可以用计时器延迟执行 将失去焦点的事件计时器延迟执行，然后点击事件里清除定时器，也是可以只执行点击事件逻辑的。
一般情况都是在 created 或者是 mounted 里面获取路由参数，但是如果是一个动态路由的话，多个路径对应的都是一个路由组件，相比于重新创建渲染组件，“复用”组件更有效，也就是说当前的组件不会被重新创建，而是被复用。这样的话也就不会执行生命周期钩子函数 created 和 mounted 了。如果想要获取动态路由组件里的参数，可以使用watch 监听属性监听路由的改变，或者是使用组件内的路由导航守卫 beforeRouteUpdate。
（1）使用watch监听路由的改变
const User = { template: '...', watch: { $route(to, from) { // 对路由变化作出响应... } } }
（2）使用beforeRouteUpdate(2.2新增的)
const User = { template: '...', beforeRouteUpdate(to, from, next) { // react to route changes... // don't forget to call next() } }
问题：异步函数或者定时器中使用传统的 function 的this指向不明确。
解决方法：可以使用箭头函数
解决方法：可以在组件的生命周期函数 beforeDestroy 里面清楚定时器。
问题：我们组件内的样式一般都是使用处于scoped 的style里面的样式，这样组件内的 dom 就可以获取样式了，但是如果我们给动态添加的dom添加样式，就不会生效，因为使用了scoped的style标签里面的标签选择器经过编译后与原来是不同的，因此如果要给动态添加的dom 添加处于scoped 的style 里面的样式是不会生效的。
解决方法：
(1) 当添加的样式不会太多的时候，而且是动态加载的，可以将其设置为非scoped的。
(2) 将添加的dom部分样式放在非scoped里面。
(3) 将添加的部分，如果有必要，可以另外写一个页面拆分vue组件。
扩展：如果是使用第三方的组件，如果你想修改里面的样式，也是不需要加scoped的，如果你想整个项目都覆盖，可以在是src/styles里面来定义customer-element.scss,在里面修改样式。
问题描叙：在常规的理解中，视图和数据是双向绑定的，但是有时候修改data的数组和对象，视图不会更新。
给对象添加新的属性或者是删除属性不显示在视图原因：因为vue2使用数据劫持和object.defaultPrototype响应式数据的，当我们访问或者设置对象中原来已有的属性的时候就会触发setter和getter，实现数据的双向绑定，而新增加的属性不是响应式的数据，所以给对象添加新属性的时候就不会触发页面的改变。
解决方法：
(1)可以使用Vue.set(target,pro,value)或者是vm.$set(target,pro,value);
(2) 可以使用Object.assign方法
直接使用assign方法是没有作用的，应该先创建一个空对象，目标对象=Object.assign({},目标对象，{新增加的属性：值}，
使用场景：
- 如果需要添加多个属性使用Object.assign
- 如果是添加少数的属性就使用Vue.set
PS:vue3采用了es6新增的proxy来实现数据的双向绑定，给对象添加新属性也可以监听到。
当对数组进行下面的操作的时候，数据是不会显示在页面上的：
（1）数组的长度发生了改变
（2）给数组的索引位置上设置新的值
解决方法：
- 使用vue.set()
- 使用array.splice()
场景：在自定义组件的时候，很多时候需要将ul 下的li标签，table下的tr/td 标签进行封装为自定义的组件，但是直接使用自定义组件会导致其最终生产的位置不是我们想要的，其标签会渲染搭配tboty标签外面。
Vue.component = ('row', {
template: '<tr><td>{{content}}</td></tr>',
data() {
return {
content:'this is a row'
}
}
})
解决方法：原因是因为html 会进行标签解析，tbody下面的标签必须是tr，其他的同理，那么我们呢可以将其子标签设置为原理的标签类型，然后使用 is='row'来解决这个问题。
在vue中是不建议直接操作dom的，如果我们需要对dom进行操作，可以借助ref来实现，Ref是用来给dom或者子组件注册引用信息的，如果是注册到子组件上，就是组件实例，如果是注册到dom上，就是元素本身。
作者：前端进击者
链接：https://juejin.cn/post/6844904196626448391
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
