浅谈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之IE的fireEvent方法详细解析
Nov 20 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
通过实例了解Javascript柯里化流程
Mar 03 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
set_include_path在win和linux下的区别
2008/01/10 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php jsonp单引号转义
2014/11/23 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
php实现评论回复删除功能
2017/05/23 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
几个人围成一圈的问题
2013/09/26 面试题
违反单位工作制度检讨书
2014/10/25 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
2019教师的学习计划
2019/06/25 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript