浅谈vue项目重构技术要点和总结

网友投稿 500 2023-02-25


浅谈vue项目重构技术要点和总结

前言

最近太忙了,博客好久gaHRBS没有更新了。今天忙里偷闲,简单总结一下最近vue项目重构的一些技术要点。

vue数据更新, 视图未更新

这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新。这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的gaHRBS解决方案吧!

解决方案如下:

1、通过vue.set方式赋值

Vue.set(数据源, key, newValue)

2、 通过Array.prototype.splice方法

数据源.splice(indexOfItem, 1, newValue)

3、修改数据的长度

数据源.splice(newLength)

4、变异方法

Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

prop 对象数组应用

在 javascript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组, 在子组件内部改变它会影响父组件的状态 。利用这一点,我们在子组件中改变prop数组或者对象,父组件以及所有应用到prop中数据的地方都会变化。我之前写过一篇js深拷贝和浅拷贝的文章,感兴趣的去看下,其实,原理是一致的。

案例如下:

所有应用到itemData的地方都会变化!

上面这种改变prop,Vue 不会在控制台给出警告,假如我们完全改变或者赋值prop,控制台会发出警告!引用官方给出的解决方案如下:

1、定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

2、定义一个计算属性,处理 prop 的值并返回:

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

v-model 的一些坑

其实v-model和sync都是一些语法糖,我之前有文章介绍过,官网也能找到类似的案例!

v-model 数据有时候是undefined的时候,不会报错,所以,一定要注意,v-model不能是undefined,否则有些莫名的问题!

重构-动态组件的创建

有时候我们有很多类似的组件,只有一点点地方不一样,我们可以把这样的类似组件写到配置文件中,动态创建和引用组件

方法一:component 和is配合使用

通过使用保留的 元素,并对其 is 特性进行动态绑定,你可以在同一个挂载点动态切换多个组件:

var vm = new Vue({

el: '#example',

data: {

currentView: 'home'

},

components: {

home: { /* ... */ },

posts: { /* ... */ },

archive: { /* ... */ }

}

})

方法二:通过render方法创建


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:关于接口通用测试用例的信息
下一篇:vuex的使用及持久化state的方式详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~