浅谈vue项目重构技术要点和总结
前言最近太忙了，博客好久没有更新了。今天忙里偷闲，简单总结一下最近vue项目重构的一些技术要点。 vue数据更新， 视图未更新这个问题我们经常会遇到，一般是vue数据赋值的时候，vue数据变化了，但是视图没有更新。这个不算是项目重构的技术要点，也和大家分享一下vue2.0通常的解决方案吧！ 解决方案如下：1、通过vue.set方式赋值 2、 通过Array.prototype.splice方法 数据源.splice(indexOfItem,1,newValue) 3、修改数据的长度 数据源.splice(newLength) 4、变异方法 Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有： prop 对象数组应用在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组， 在子组件内部改变它会影响父组件的状态 。利用这一点，我们在子组件中改变prop数组或者对象，父组件以及所有应用到prop中数据的地方都会变化。我之前写过一篇的文章，感兴趣的去看下，其实，原理是一致的。 案例如下：
export default {
components: {
},data() {
},props: {
itemData: Object
},methods: {
}
};
所有应用到itemData的地方都会变化！ 上面这种改变prop，Vue 不会在控制台给出警告，假如我们完全改变或者赋值prop，控制台会发出警告！引用官方给出的解决方案如下： 1、定义一个局部变量，并用 prop 的值初始化它： 2、定义一个计算属性，处理 prop 的值并返回： v-model 的一些坑其实v-model和sync都是一些语法糖，我之前有文章介绍过，官网也能找到类似的案例！ v-model 数据有时候是undefined的时候，不会报错，所以，一定要注意，v-model不能是undefined，否则有些莫名的问题！ 重构-动态组件的创建有时候我们有很多类似的组件，只有一点点地方不一样，我们可以把这样的类似组件写到配置文件中，动态创建和引用组件 方法一：component 和is配合使用通过使用保留的 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件： 方法二：通过render方法创建
export default {
data() {
return {
};
},render: function(createElement) {
let _type = bi.chart.data.type;
let _attr = bi.chart.components[_type]["attr"];
return createElement(_attr,{
props: {
}
});
}
};
bi.chart.components[_type]["attr"]这个是在配置文件中动态配置的，type点击的时候会改变，会取不同type下面的attr属性！ 公共属性抽离我们在项目中，经常会用很多状态或者数据，我们可以把很多公共数据抽离出来，放到一个对象中，后面我们可以监听这个数据对象变化。进行数据保存或者获取。 可以利用上面深度监听。假如初始化的时候要立即执行，我们可以用立即执行监听！ require动态加载依赖我们可以利用require同步特性，在代码中动态加载依赖，例如下面echart主题，我们可以点击切换的时候，动态加载！ import加载要放到头部，初始化的时候，可以把默认主题用import加载进来！ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |