浅谈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 相关文章推荐
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
星际中的相关伤害
2020/03/04 星际争霸
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
js常用代码段整理
2011/11/30 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
详解anaconda安装步骤
2020/11/23 Python
如何利用python生成MD5并去重
2020/12/07 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
业务部门经理岗位职责
2014/02/23 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书