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


Posted in Javascript onJanuary 23, 2018

前言

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

vue数据更新, 视图未更新

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

解决方案如下:

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深拷贝和浅拷贝的文章,感兴趣的去看下,其实,原理是一致的。

案例如下:

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

所有应用到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: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变! -->
</component>

方法二:通过render方法创建

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

bi.chart.components[_type]["attr"]这个是在配置文件中动态配置的,type点击的时候会改变,会取不同type下面的attr属性!

公共属性抽离

我们在项目中,经常会用很多状态或者数据,我们可以把很多公共数据抽离出来,放到一个对象中,后面我们可以监听这个数据对象变化。进行数据保存或者获取。

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

可以利用上面深度监听。假如初始化的时候要立即执行,我们可以用立即执行监听!

require动态加载依赖

我们可以利用require同步特性,在代码中动态加载依赖,例如下面echart主题,我们可以点击切换的时候,动态加载!

require("echarts/theme/"+ data.theme);

import加载要放到头部,初始化的时候,可以把默认主题用import加载进来!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery动态加载图片数据练习代码
Aug 04 Javascript
五段实用的js高级技巧
Dec 20 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript中this详解
Sep 01 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
js实现二级联动简单实例
Jan 11 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
three.js 入门案例详解
Jan 23 #Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 #Javascript
vuex的使用及持久化state的方式详解
Jan 23 #Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js 实现复选框只能选择一项的示例代码
Jan 23 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
yii用户注册表单验证实例
2015/12/26 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
javascript this详细介绍
2016/09/19 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
pandas重新生成索引的方法
2018/11/06 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python 写一个文件分发小程序
2020/12/05 Python
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
研究生自我鉴定范文
2013/10/30 职场文书
人事主管的岗位职责
2013/11/16 职场文书
表彰会主持词
2014/03/26 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
给客户的检讨书
2014/12/21 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
试了下Golang实现try catch的方法
2021/07/01 Golang