vue应用难点总结

桃扇骨 2021-11-01 07:52 218阅读 0赞

一、父子组件生命周期

父组件create->子组件create->子组件mounted->父组件mounted

当一个钩子函数使用了异步请求时，并不会等该钩子函数中所有异步的回调都执行完了再执行后面的生命周期函数。

二、响应式数据

所谓响应式数据就是当数据发生变化时会更新引用该数据的dom、会使computed属性重新生成值，会被watch方法监听到；

Vue判断数据是否变化的方法很简单，值类型直接用===来比较是否相同,引用类型则比较地址；

Vue 将会递归将 data 中的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化；

当把data中某个**对象或数组类型的属性整体替换时**，该属性的所有成员依然是响应式的

var vm = new Vue({
      data:{
        obj:{id:1}
      }
    })
    vm.obj={name:'replace',id:'3'} //obj被整个替换了，但还是响应式的，里面的name和id也是响应式的

Vue 不能检测对象属性的添加或删除：

vm.obj.dynamicAdd="动态添加的属性" //dynamicAdd是后续动态添加的属性，如果想变成响应式的则需要用vm.set()

**数组元素注意事项:**

能侦测到数组变化的操作方法有：`push()、``pop()、``shift()、``unshift()、``splice()、``sort()、``reverse()`

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

*  当你利用索引直接设置一个数组项时，例如：`vm.items[indexOfItem] = newValue`
 *  当你修改数组的长度时，例如：`vm.items.length = newLength`

var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的

对于第一个问题的解决方案使用以下两种方法中的任意一种即可：

vm.items.splice(1, 1, 'newb')；//相当于是替换
    vm.$set(vm.items, 1, 'newB')

对于第二个问题的解决方案如下：

vm.items.splice(newLength) //newLength如果超出了数组的长度，则从数组末尾开始添加内容

转载于:https://www.cnblogs.com/94pm/p/11291687.html

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 c++难点（较高级使用技巧）总结

录[(?)][Link 1][\[+\]][Link 1] 1. [一数组名和指针的深入理解][Link 2] 2. [二函数名与函数指针][Link 3] 3. ...

Dear 丶/ 2024年04月17日 22:45/ 0 赞/ 24 阅读

相关 ts重难点泛型总结

1.泛型 generics 定义返回任意类型的函数 function echo<T>(arg: T): T { return arg }

我就是我/ 2023年01月05日 12:46/ 0 赞/ 104 阅读

相关 408复习难点总结归纳

文章目录前言一、计算机组成原理 1.IEEE754标准 2.浮点数加减运算 Ⅰ.对阶

野性酷女/ 2022年12月20日 02:09/ 0 赞/ 139 阅读

相关 Vue应用实践实例总结

vue包含一系列的扩展插件(库) vue-cli: vue脚手架 vue-resource(axios): ajax请求 vue-router:

小咪咪/ 2022年12月17日 15:53/ 0 赞/ 108 阅读

相关项目难点

关系图谱绘制头部，侧边栏组件全局公用 oss直传钉钉接入 \\1. 基于 Ice CLI搭建应用环境 \\2. 利用状态管理store多个微应用之间实现数据共享

╰半橙微兮°/ 2022年10月29日 03:11/ 0 赞/ 102 阅读

相关总结Java学习中64例重点、难点

1、面向对象的特征有哪些方面（1）抽象：抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择

比眉伴天荒/ 2022年05月20日 05:08/ 0 赞/ 152 阅读

相关 Vue难点1-作用域插槽详解

首先，定义一个组件需要在子组件中循环显示一个列表 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.

客官°小女子只卖身不卖艺/ 2022年03月22日 02:30/ 0 赞/ 150 阅读

相关表驱动法应用的难点

好的代码总是将复杂的逻辑以分层的方式降低单个层次上的复杂度。复杂与简单有一个相互转化的过程。 1. 表驱动法在涉及编码解析的功能时，常常有一个带有长长一串c

桃扇骨/ 2021年11月29日 08:14/ 0 赞/ 175 阅读

相关 vue应用难点总结

一、父子组件生命周期父组件create->子组件create->子组件mounted->父组件mounted 当一个钩子函数使用了异步请求时，并不会等该钩子函数中所有异步

桃扇骨/ 2021年11月01日 07:52/ 0 赞/ 219 阅读

相关 vue实现todo应用总结

慕课网上的vue+webpack实现的TODO列表的开发，本人采用vue-cli方式进行项目初始化，后面可以修改webpack配置和安装响应的包等．用了部分es6语法．１．

青旅半醒/ 2021年10月09日 04:16/ 0 赞/ 265 阅读