【转】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深拷贝和浅拷贝的文章,感兴趣的去看下,其实,原理是一致的。
案例如下:
<inputclass="pinput max"type="text"v-model="itemData.data.did"><script>exportdefault{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(){returnthis.size.trim().toLowerCase()}}
v-model 的一些坑
其实v-model和sync都是一些语法糖,我之前有文章介绍过,官网也能找到类似的案例!
v-model 数据有时候是undefined的时候,不会报错,所以,一定要注意,v-model不能是undefined,否则有些莫名的问题!
重构-动态组件的创建
有时候我们有很多类似的组件,只有一点点地方不一样,我们可以把这样的类似组件写到配置文件中,动态创建和引用组件
方法一:component 和is配合使用
通过使用保留的 元素,并对其 is 特性进行动态绑定,你可以在同一个挂载点动态切换多个组件:
var vm =newVue({el:'#example',data:{currentView:'home'},components:{home:{/* ... */},posts:{/* ... */},archive:{/* ... */}}})<component v-bind:is="currentView"><!--组件在 vm.currentview 变化时改变!--></component>
方法二:通过render方法创建
<script>exportdefault{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},
可以利用上面深度监听。假如初始化的时候要立即执行,我们可以用立即执行监听!
动态加载依赖
import命令会被 JavaScript 引擎静态分析
// 报错if(x ===2){importHaoroomsfrom'./Haorooms';}
解决方案一:require加载
因为require是运行时加载模块,import命令无法取代require的动态加载功能。
在代码中动态加载依赖,例如下面echart主题,我们可以点击切换的时候,动态加载!
require("echarts/theme/"+ data.theme);
解决方法二:import()函数
例如:
const main = document.querySelector('main');import(`./section-modules/${someVariable}.js`).then(module=>{module.loadPageInto(main);}).catch(err =>{main.textContent = err.message;});
按需加载。
button.addEventListener('click',event=>{import('./dialogBox.js').then(dialogBox =>{dialogBox.open();}).catch(error =>{/* Error handling */})});
条件加载
if(condition){import('moduleA').then(...);}else{import('moduleB').then(...);}
动态的模块路径
import(f()).then(...);
上面代码中,根据函数f的返回结果,加载不同的模块。
$destroy()销毁组件,没有销毁slot
可以用v-if判断slot,如下:
<comp-b @close-a="showA = false"><comp-av-if="showA"/></comp-b>
另外可以用v-if指定组件渲染循序,例如,某个组件要在ajax请求返回数据之后再渲染,我们可以给组件一个状态,默认是false,当ajax请求返回数据之后,状态改成true。
转自:https://www.haorooms.com/post/vue_project_cg
转载于:https://www.cnblogs.com/yunspider/p/9291830.html
【转】vue项目重构技术要点和总结相关推荐
- 2个程序员1周拿下4万块小程序项目的技术要点
本文给大家分享一个真实的商业项目,和其中的技术要点.这其中也体现了菜鸟程序员和有经验程序员所思考问题的区别.请认真看到底,应该可以学到很多书本和培训教程里学不到的东西. 这个项目规模不大,2个程序员, ...
- 4 angular 重构 项目_vuejs angularjs 框架的一些比较(vue项目重构四)
使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...
- 怎么填写查新技术要点和查新点?
一.科技查新技术要点的填写内容和技巧: 1.科技查新技术要点的填写内容依次为: 项目所属技术领域: 项目本身的内容简介: 项目的国内或国外的相关背景和现状: 项目研究依据的理论或方法: 项目创新的内容 ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- 学习(Java Web)编程技术要点及方向; 完成项目的要决
本文亮点: 传统学习编程技术落后,应跟著潮流,要对业务聚焦处理. 要Jar, 不要War:以小为主,以简为宝,集堆而成. 去繁取简 Spring Boot,明日之春. 集堆综合技术如 jHipster ...
- vue项目技术知识点
vue项目技术知识点 1.构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么? 1.vue.js:vue-cli工程的核心,主要特点是双向数据绑定和组件系统 2.vue-router:v ...
- vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
- c++可视化开发_页面可视化配置搭建工具技术要点
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 前言 最近公司也在计划做可视化配置平台,从本文原作者(腾讯AlloyTeam@陈韩杰)的分析中 ...
- 页面可视化搭建工具技术要点
背景 页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力. 页面可视化搭建工具搭建出的页面示例: 但从零开 ...
最新文章
- Python开发基础总结(三)排序+迭代+生成器+装饰器
- 十分钟学习自然语言处理概述
- 全球传媒巨头纷纷布局,VR影视内容的爆点可期
- Java命令行界面(第3部分):jbock
- 信息学奥赛一本通C++语言——1128:图像模糊处理
- 计算机组成与体系结构——计算机结构——2020.11.19
- 2020年最好用的手机是哪一款_2020年入手5G手机最佳时期到了:5款最佳手机,您认可哪款...
- REMIX 本地环境搭建指南
- 电脑重启 硬件问题引发的人品问题
- monkey自动化测试(命令行)
- C语言如何去掉非数字字符串,Objective-C中利用正则去除非数字字母汉字方法实例...
- 大数据Hadoop生态系统介绍
- 在Tiny6410烧写linux内核文件和文件系统
- 产品经理的第二本书_笔记
- 商务短信通平台建设实施方案
- imresize函数进行图像缩放及利用imrotate进行图像旋转
- 常用数据库分页查询SQL汇总
- 抖音小程序是什么_如何开发抖音小程序
- 公证通Factom白皮书
- MySQL创建数据库和表格
热门文章
- 获取 NodeJS 程序退出码
- Windows Phone 7 常用控件简介
- jqGrid获取数据库数据的方式
- 使用GDAL工具对FY3系列卫星数据进行校正
- 插入始终是1_插入式电磁流量计的安装说明
- 使用python制作ArcGIS插件(2)代码编写
- webAppbuilder微件使用教程3 地理处理微件
- 网游服务器通信架构设计
- flex blazeds java spring_Flex+Java+Spring+BlazeDS 配置篇说明
- php 给数组里面压入数组,php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)...