vue数据更新, 视图未更新

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

解决方案如下:

1、通过vue.set方式赋值

  1. Vue.set(数据源, key, newValue)

2、 通过Array.prototype.splice方法

  1. 数据源.splice(indexOfItem,1, newValue)

3、修改数据的长度

  1. 数据源.splice(newLength)

4、变异方法

Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:

  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. reverse()

prop 对象数组应用

在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。利用这一点,我们在子组件中改变prop数组或者对象,父组件以及所有应用到prop中数据的地方都会变化。我之前写过一篇js深拷贝和浅拷贝的文章,感兴趣的去看下,其实,原理是一致的。

案例如下:

  1. <inputclass="pinput max"type="text"v-model="itemData.data.did"><script>exportdefault{
  2. components:{},
  3. data(){},
  4. props:{
  5. itemData:Object},
  6. methods:{}};</script>

所有应用到itemData的地方都会变化!

上面这种改变prop,Vue 不会在控制台给出警告,假如我们完全改变或者赋值prop,控制台会发出警告!引用官方给出的解决方案如下:

1、定义一个局部变量,并用 prop 的值初始化它:

  1. props:['initialCounter'],
  2. data:function(){return{ counter:this.initialCounter }}

2、定义一个计算属性,处理 prop 的值并返回:

  1. props:['size'],
  2. computed:{
  3. normalizedSize:function(){returnthis.size.trim().toLowerCase()}}

v-model 的一些坑

其实v-model和sync都是一些语法糖,我之前有文章介绍过,官网也能找到类似的案例!

v-model 数据有时候是undefined的时候,不会报错,所以,一定要注意,v-model不能是undefined,否则有些莫名的问题!

重构-动态组件的创建

有时候我们有很多类似的组件,只有一点点地方不一样,我们可以把这样的类似组件写到配置文件中,动态创建和引用组件

方法一:component 和is配合使用

通过使用保留的 元素,并对其 is 特性进行动态绑定,你可以在同一个挂载点动态切换多个组件:

  1. var vm =newVue({
  2. el:'#example',
  3. data:{
  4. currentView:'home'},
  5. components:{
  6. home:{/* ... */},
  7. posts:{/* ... */},
  8. archive:{/* ... */}}})<component v-bind:is="currentView"><!--组件在 vm.currentview 变化时改变!--></component>

方法二:通过render方法创建

  1. <script>exportdefault{
  2. data(){return{};},
  3. render:function(createElement){
  4. let _type = bi.chart.data.type;
  5. let _attr = bi.chart.components[_type]["attr"];return createElement(_attr,{
  6. props:{}});}};</script>

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

公共属性抽离

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

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

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

动态加载依赖

import命令会被 JavaScript 引擎静态分析

  1. // 报错if(x ===2){importHaoroomsfrom'./Haorooms';}

解决方案一:require加载

因为require是运行时加载模块,import命令无法取代require的动态加载功能。

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

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

解决方法二:import()函数

例如:

  1. const main = document.querySelector('main');import(`./section-modules/${someVariable}.js`).then(module=>{module.loadPageInto(main);}).catch(err =>{
  2. main.textContent = err.message;});

按需加载。

  1. button.addEventListener('click',event=>{import('./dialogBox.js').then(dialogBox =>{
  2. dialogBox.open();}).catch(error =>{/* Error handling */})});

条件加载

  1. if(condition){import('moduleA').then(...);}else{import('moduleB').then(...);}

动态的模块路径

  1. import(f()).then(...);

上面代码中,根据函数f的返回结果,加载不同的模块。

$destroy()销毁组件,没有销毁slot

可以用v-if判断slot,如下:

  1. <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

【转】vue项目重构技术要点和总结的更多相关文章

  1. webpack+vue-cli搭建项目 (vue项目重构三)

    在自己的电脑下载了npm 与 node的情况下 可使用vue-cli快速构建vue项目执行命令如下: # 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 &q ...

  2. vue的双向绑定原理解析(vue项目重构二)

    现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...

  3. vuejs angularjs 框架的一些比较(vue项目重构四)

    使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...

  4. Vue项目实践中的功能实现与要点

    本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...

  5. vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  6. 省A类竞赛二等奖--村先游项目VUE前端重构

    村先游--省二竞赛项目VUE重构 源码地址: 重构前的(前端+后台):https://github.com/Archer-Fang/cunxianyou 重构前的(前端):https://github ...

  7. vue项目使用websocket技术

    一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新 ...

  8. Vue项目用于Ios和Android端开发

    起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...

  9. Vue 项目架构设计与工程化实践

    来源 文中会讲述我从0~1搭建一个前后端分离的vue项目详细过程 Feature: 一套很实用的架构设计 通过 cli 工具生成新项目 通过 cli 工具初始化配置文件 编译源码与自动上传CDN Mo ...

随机推荐

  1. sublime3 mac : Package Control There are no packages available for installation

    如下问题: 查看控制台:点击 ctrl+`打开控制台 发现是因为http://packagecontrol.io/channel_v3.json 获取失败,手动下载channel_v3.json文件, ...

  2. django Admin文档生成器

    Django的admindocs应用可以从模型.视图.模板标签等地方获得文档内容. 一.概览 要激活admindocs,请按下面的步骤操作: 在INSTALLED_APPS内添加django.cont ...

  3. mkdir -p a/b 表示创建目录a,并创建目录a的子目录b

    mkdir -p 命令解释 2016年01月13日 14:24:03 阅读数:742 mkdir -p a/b 表示创建目录a,并创建目录a的子目录b, 若不使用命令-p的话,想要达到同样的效果,需要 ...

  4. 力扣(LeetCode)70. 爬楼梯

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

  5. java线程执行的优先级

    1.1      线程的优先级 java 中的线程优先级的范围是1-10,默认的优先级是5.10极最高. 有时间片轮循机制.“高优先级线程”被分配CPU的概率高于“低优先级线程”.根据时间片轮循调度, ...

  6. Within K stops 最短路径 Cheapest Flights Within K Stops

    2018-09-19 22:34:28 问题描述: 问题求解: 本题是典型的最短路径的扩展题,可以使用Bellman Ford算法进行求解,需要注意的是在Bellman Ford算法的时候需要额外申请 ...

  7. 错误不能中断(不许因错误或异常而产生阻断性Bug)

    错误不能终断(不许因错误或异常而产生阻断性Bug),当遇到错误或异常时,要处理掉,并且给予合理提示(比如:XXX失败,请重试)

  8. django笔记 - 建站

    1,建站步骤:1)django-admin.exe startproject mysite 创建完后的目录结构: - mysite # 对整个程序进行配置 - init - settings # 配置 ...

  9. a gcc 4.2.4 bug(被stos指令累加后%edi作为参数的)

    a gcc 4.2.4 bug(被stos指令累加后%edi作为参数的) * * Ok, now we can initialize the rest of the tty devices and c ...

  10. android------基础面试题

    1. Android的四大组件是哪些,它们的作用? 答:Activity:Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为保持各界面的状态,做很多持 ...