<div id="app">
<ul>
<li v-for='item in goods'>{{item}}</li>
</ul> <div>{{a}}</div> <button v-on:click='demo'>click</button>//由于js的弱点导致的,vue无法检测到数组内部的变化,只能检测到地址变化
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
goods: ['aa', 'bb', 'cc', 'rrr']
},
methods: {
demo: function () {
this.goods=this.goods.concat(1,2,3)//改变原数组,能重新渲染
this.goods.concat(1,2,3)//不改变原数组,不能重新渲染
this.goods.splice(1)//splice方法能够改变原数组会重新渲染
Vue.set(this.goods,1,'fff')//用set方法 能够检测到到变化 }
}
})
</script>

v-for指令如果渲染的对象没有改变地址,则不会重新渲染

从vue渲染想到的数组方法的更多相关文章

  1. Vue可响应式数组方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

  3. ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)

    1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...

  4. 从虚拟dom了解vue渲染函数

    vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...

  5. Vue渲染数据理解以及Vue指令

    一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...

  6. Vue渲染原理

    现在基本所有的框架都已经认同这个看法——DOM应尽可能是一个函数式到状态的映射.状态即是唯一的真相,而DOM状态只是数据状态的一个映射.如下图所示,所有的逻辑尽可能在状态的层面去进行,当状态改变的时候 ...

  7. JavaScript数组方法--concat、push

    利用了两天的时间,使用typescript和原生js重构了一下JavaScript中数组对象的主要方法,可以移步github查看. 这里,按照MDN上的文档顺序,再重新学习一下数组方法吧. conca ...

  8. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  9. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

随机推荐

  1. 08、共享变量(Broadcast Variable和Accumulator)

    共享变量工作原理 Spark一个非常重要的特性就是共享变量.   默认情况下,如果在一个算子的函数中使用到了某个外部的变量,那么这个变量的值会被拷贝到每个task中.此时每个task只能操作自己的那份 ...

  2. 【MySQL】解决You can't specify target table 'user_cut_record_0413' for update in FROM clause

    问题 You can't specify target table 'user_cut_record_0413' for update in FROM clause 原因 待更新/删除的数据集与查询的 ...

  3. echarts参数详解--散点图

    参考地址:http://www.cnblogs.com/weizhen/p/5907617.html <!-- 1.首先需要下载包echarts.js,然后引入该包 --> <!DO ...

  4. 【Linux】常见公共DNS地址

    如果您是程序员.系统管理员或任何类型的 IT 工作者,那么您可能有自己最喜欢的用于故障排除的 IP 地址.而且你可能已经用了好几年了. 这些 ip 可用于: ping 测试连接 使用 dig 或 ns ...

  5. 理解JAVA的IO

    1. 什么是流Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序列 ...

  6. Down Payment 和 Deposit的差异

    If you’re like most homeowners, purchasing a home represents the single biggest financial transactio ...

  7. BizTalk RosettaNet 开发笔记

    RNIF BAM Tracking Error  解决办法:  503: Service Unavailable   解决办法:IIS 应用程序池运行账户用户名或密码错误,用户名不能是doma ...

  8. Linux基础知识之用户和用户组以及 Linux 权限管理

    已经开始接触Linux用户管理,用户组管理,以及权限管理这几个逼格满满的关键字.这几个关键字对于前端程序猿的我来说真的是很高大上有木有,以前尝试学 Linux 的时候看到这些名词总是下意识的跳过不敢看 ...

  9. 【转载】Linux 命令行快捷键 - 移动光标

    Linux 命令行快捷键 - 移动光标 涉及在linux命令行下进行快速移动光标.命令编辑.编辑后执行历史命令.Bang(!)命令.控制命令等.让basher更有效率. 常用 ctrl+左右键:在单词 ...

  10. 链接学习之obj文件探索

    Windows的gcc环境,往官网http://sourceforge.net/project/showfiles.php?group_id=2435 下载MinGW,安装,安装完毕后按照包 配置环境 ...