vue handler 修改data_优雅的vue进阶技巧，小伙伴们确定不要尝试一下吗？

给小伙伴们分享一下我在vue开发中使用的技巧(适合收藏)，希望能对正在使用vue的小伙伴们能够有所帮助，话不多说，直奔主题。

1、使用v-for动态渲染components

import one from '@/components/one.vue'import two from "@/components/two.vue";export default{      components:{        one,        two    }  }

接下来v-for动态组件的使用

componentsList:['one','two']

编译以后的效果就是

2、学会使用watch来简化你的代码

watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行，所以有些小伙伴会采取在create或者mounted中再执行一次，

immediate为 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行

 watch:{     '$route.query.id':{       handler(newName,oldName){         this.getFormData()           //执行代码       },     } },  mounted () {        this.getFormData()                ;  },

其实只需要这样：

 watch:{     '$route.query.id':{       handler(newName,oldName){          this.getFormData()           //执行代码       },