浅谈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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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的库,结果发现很多东西
2006/12/31 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
js+xml生成级联下拉框代码
2012/07/24 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
团员的自我评价
2013/12/01 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
2014年派出所工作总结
2014/11/21 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
java版 联机五子棋游戏
2022/05/04 Java/Android