vue中的问题思考
1.为什么 data 要写成函数,而不允许写成对象?
思考:data是 Vue 实例上的一个属性。2. 对象是对于内存地址的引用。3. 函数有自己的作用域空间。
第一点无可厚非,data属性附着于 Vue 实例上。
第二点,JS 的数据类型分为基本类型和引用类型,基本类型存储在栈内存中,引用类型存储在堆内存中,并且引用类型指向的是栈内存中的堆区地址。
小结:
Vue 里面data属性之所以不能写成对象的格式,是因为对象是对地址的引用,而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话,改变其中一个子组件内此变量的值,会影响其他组件的这个变量的值。如果写成函数的话,那么他们有一个作用域的概念在里面,相互隔阂,不受影响。
2.Vue实例中数组改变 `length` 或下标直接赋值什么不能更新视图?
因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view;
我们直接给数组元素赋值,又或者直接赋值改变数组的长度,vue是无法检查到的,从而导致视图页面无法渲染更新。
Vue 劫持了数组可以改变原数组的 Api,使得每次调用都会执行 dep.notify() 方法进而去更新视图。
var methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
];
vue中的问题思考的更多相关文章
- 由 Vue 中三个常见问题引发的深度思考
为什么 data 要写成函数,而不允许写成对象? Vue 中常说的数据劫持到底是什么? Vue 实例中数组改变 length 或下标直接赋值什么不能更新视图? http://www.sohu.com/ ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 基于iscroll的better-scroll在vue中的使用
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...
- 详解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- better-scroll在vue中的坑
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开“微信 —> 钱包—>滴滴出 ...
- better-scroll在vue中的应用
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scrol ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
随机推荐
- css简单的数学运算
calc()是css3的一个新增的属性, .box{border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB;} 兼容 ...
- 迭代器模式(Iterator.hasNaxt())
迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 迭代器模式属于行为型模式. ...
- Ruby中任务构建工具rake的入门
不同的rake文件当中不要定义重名的方法,不然没法调用 参考:http://www.jb51.net/article/81476.htm Rake简介 Rake的意思是Ruby Make,一个用rub ...
- oracle 错误代码表
ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出 ...
- leetcode 677. Map Sum Pairs
Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...
- mpvue——实现点击数组内的某一元素进行置顶(排序第一)操作
前言 其实很简单只是用了js的几个函数 substr unshift splice 完整代码 | mpvue模仿QQ 代码 思路很简单,获取当前元素下标然后通过unshift函数将该值插入到数组第一位 ...
- oracle:rman恢复----通过时间set until time
试验计划:先做一个0级备份,再创建一个表,插入几条数据,最后删除表,然后通过rman把该表的数据恢复. 试验环境:在归档模式,oracle10.2.0.1 开始试验: 1.rman level 0备份 ...
- SPOJ:House Fence(分治&DP)
"Holiday is coming, holiday is coming, hurray hurray!" shouts Joke in the last day of his ...
- MySql必知必会内容导图
<MySQL必知必会>从介绍简单的数据检索开始,逐步深入一些复杂的内容,包括联结的使用.子查询.正则表达式和基于全文本的搜索.存储过程.游标.触发器.表约束,等等.通过重点突出的章节,条理 ...
- 【AMPPZ 2014】 The Captain
[题目链接] 点击打开链接 [算法] 按x轴排序,将相邻点连边 按y轴排序,将相邻点连边 然后对这个图跑最短路就可以了,笔者用的是dijkstra算法 [代码] #include<bits/st ...