<template>
  <div ></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,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watch

export 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()即可取消

四、for循环中针对ui样式的特征样式或者事件

（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。

六、input事件执行的顺序

　　问题：定义了输入框的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()
  }
}

八、异步函数或者定时器中的this指向

　　问题：异步函数或者定时器中使用传统的 function 的this指向不明确。

　　解决方法：可以使用箭头函数

九、组件销毁了但是定时器等函数还在执行

　　解决方法：可以在组件的生命周期函数 beforeDestroy 里面清楚定时器。

十、动态添加的Dom 没有样式

　　问题：我们组件内的样式一般都是使用处于scoped 的style里面的样式，这样组件内的 dom 就可以获取样式了，但是如果我们给动态添加的dom添加样式，就不会生效，因为使用了scoped的style标签里面的标签选择器经过编译后与原来是不同的，因此如果要给动态添加的dom 添加处于scoped 的style 里面的样式是不会生效的。

　　解决方法：

　　(1) 当添加的样式不会太多的时候，而且是动态加载的，可以将其设置为非scoped的。

　　(2) 将添加的dom部分勇士放在非scoped里面。

　　(3) 将添加的部分，如果有必要，可以另外写一个页面拆分vue组件。

　　扩展：如果是使用第三方的组件，如果你想修改里面的样式，也是不需要加scoped的，如果你想整个项目都覆盖，可以在是src/styles里面来定义customer-element.scss,在里面修改样式。

十一、vue直接修改数据，但是页面它视图不更新。

　　问题描叙：在常规的理解中，视图和数据是双向绑定的，但是有时候修改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'来解决这个问题。

十三、ref的使用

　　在vue中是不建议直接操作dom的，如果我们需要对dom进行操作，可以借助ref来实现，Ref是用来给dom或者子组件注册引用信息的，如果是注册到子组件上，就是组件实例，如果是注册到dom上，就是元素本身。

作者：前端进击者

链接：https://juejin.cn/post/6844904196626448391

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

上一篇 »Python实战项目-7发送验证码/短信登录/短信注册接口
下一篇 »python去除列表中的空值元素实战技巧

vue项目-实战技巧，一

相关推荐

如何开发一款基于 vite+vue3 的在线表格系统？下

Swift 算法实战之路：基本语法与技巧

Vue3 + TypeScript + vue-class-component +Webpack 实战踩坑

【一】Swift 3.0 新浪微博项目实战 -整体框架搭建

vue 项目实战之小坑坑

vue项目实战：项目搭建使用vue+Es6+webpack+vuex+axios+Element ui完成 文件夹内容的确定

如何用webpack搭建vue项目？本文案例详解？

关于vue-cli-service:command not found报错引发的实战案例

vue项目实战：项目搭建使用vue+Es6+webpack+vuex+axios+Element ui完成文件夹内容的确定