当前播放: 11 | 如何触发组件的更新
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:基础篇 (17讲)
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
免费
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
第二章:生态篇 (13讲)
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层原理
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element UI、Ant Design Vue、iView
27 | 提升开发效率和体验的常用工具:ESLint、Prettier、vue-devtools
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
第三章:实战篇 (21讲)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建项目
33 | 如何自定义Webpack和Babel配置
34 | 如何设计一个高扩展性的路由
35 | 实现一个可动态改变的页面布局
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权限组件、权限指令)
39 | 如何在组件中使用ECharts、Antv等其他第三方库
40 | 如何高效地使用Mock数据进行开发
41 | 如何与服务端进行交互(Axios)
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态赋值
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验的表单项
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主题
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
第四章:福利篇 (2讲)
52 | 如何发布组件到npm
53 | GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
11 | 如何触发组件的更新

11 | 如何触发组件的更新

唐金州
一点资讯前端技术专家,Ant Design Vue 作者
53讲 53课时,约500分钟10784
单独订阅¥129
2人成团¥99
13
登录 后留言

精选留言(33)

  • Gadzan
    1. Vue框架对数组的push、pop、shift、unshift、sort、splice、reverse方法进行了改造,在调用数组的这些方法时,Vue会Notify Wacher并更新视图。
    2. 如果的确想要利用索引直接设置数组的值可以使用Vue.set()方法,具体在
    https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
    可以了解。
    2019-03-23
    26
  • 風雲啸
    4分19秒。 this.list.push(1,2,3) Array.push()是会改变原数组的。

    作者回复: 对 描述有点问题,应该说并不会改变this.list的引用,只是改变了数组的内容

    2019-03-18
    1
    10
  • hau5yi
    我觉得直接用console给结论的方式太搞笑了,应该是由结果推出结论,而不是在必定触发的方法里把结论直接打印出来。你就直接打印这个变量,让大家就看这个变量,刚刚是怎样的,现在怎样了。再引出结论,大家就理解了。不然你改了代码,结论不改,容易造成误解啊。

    作者回复: 你这个“结果”“结论”,搞得我有点蒙。
    我想的是,结论我们是知道的,官方给出的,不是我们推导出来的,我要做的就是通过各种方式验证结论,加深理解。

    2019-03-31
    8
  • 朝花夕拾
    希望老师后面能讲一下响应式的原理
    2019-03-19
    5
  • KaKa
    老师··· 每节课你都会留有问题给学生作答, 评论里虽然有不同人的理解。 可是我还是希望老师留了问题以后 在下期视频开头前回头解答下上期预留的问题。不然每回留了问题 不会的还是不会。别人的回答也不一定准确。 希望老师能够采纳= =
    2019-05-31
    4
  • YANGFEI
    push是改变了数字内容,不改变引用的吧?

    作者回复: 对 描述的不够严谨

    2019-03-19
    3
  • pp2004266
    数组支持响应式更新的方法:push(),pop(),shift(),unshift(),splice(),sort(),reverse(),因为这些方法会改变原数组。
    不支持响应式更新的方法:filter(),concat(),slice(),这3个放法会返回新数组,可以用新数组替换原数组解决
    2019-04-18
    2
  • leixin
    老师, 开源项目Ant Design of Vue 会长期维护吗?觉得它比较漂亮,想用在项目上。

    作者回复: 会长期维护的哈

    2019-04-01
    2
  • 青灯暮雨
    this.name为什么要写到return外面,这样写和写在return中有什么区别,如果name在data函数中的return中定义,那么是会影响到子组件的吧?

    作者回复: 写到外面是为了演示一种场景就是,如果不写在data中,this.name的改变不会触发组件的更新

    2019-03-28
    2
  • 萌太浪
    老师,你的vscode都装了哪些插件来使用vue开发呢?

    作者回复: vetur + eslint

    2019-03-18
    1
  • 霍进
    Vue 对数组的 push 、pop、shift、unshift 等方法进行了修改,这些作用于数组元素的方法仍会触发更新;像 arr.length = val 这种修改数组长度的方式 不会触发更新; 这是 Object.defineProperty 局限性导致的, 它定义的是一个对象上某个值的表现,而非对象本身。而 Proxy 定义的是一个对象上行为的表现,Proxy是不局限于某个属性的,因此它能够追踪到对象中属性的增加和删除。
    2019-12-25
  • 18625322963
    提个问题,你们可以去试试,如果一个数据a在data里初始化并没有挂载到dom上,但是在接下来 的业务逻辑动态添加到dom里了,那么此时render会不会执行,vue对这种是怎么做的?
    2019-12-03
  • 原来的template并没有显示this.b呐...
    2019-10-28
  • Saki
    前两天遇到这类问题还纠结了挺久,明明debug时打印出来的值已经被改变,View却没有更新。
    网上找来的结果也只有一句话,Vue响应不了数组/对象成员的更改。
    原来原理在这~,是不是只有将对象的成员全都的声明在data return里,修改时View才会更新?
    临时添加的成员是否也做不到?
    还有,写在return外的变量,是不是就代表着不需要在View上使用?
    2019-10-20
  • 风中骄子
    如何让change data. b生效呢?我有个div需要动态显示的,和这个现象一样
    2019-09-27
  • 怀英
    #5W2H#
    What:vue触发组件更新
    Why:null
    Who:null
    Where:watcher
    When:null
    How:用getter/setter,在render之前做组件更新;更新的组件会被放入到watcher里面
    How much/how good/how bad:null
    2019-09-23
  • Strive
    哈哈哈,你认为的特殊情况只是你认为的特殊情况。😂
    2019-09-12
  • 好久好久好久好久好久
    老师,this.$forceupdate能不能算在强制触发响应式的方法里面呢?看了文档,它会强制vue实例再次渲染,那么在之前添加的属性会不会变成响应式呢
    2019-09-11
  • suxun
    老师,请问下如何理解"经过push操作,数组里面的内容改变了,但是数组是引用类型,数组本身并没有改变"这句话?数组内容改变了但是数组还是没变?
    2019-08-22
  • 毛利

    'vue-cli-service' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! geektime-vue@0.1.0 serve: `vue-cli-service serve`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the geektime-vue@0.1.0 serve script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?


    为什么跑不起来

    小白来的
    2019-08-11
收起评论
看过的人还看
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33214 人已学习

拼团 ¥79 原价 ¥99
玩转webpack

程柳锋  腾讯高级工程师,IVWEB团队社区和工程化负责人

84讲 | 5544 人已学习

拼团 ¥79 原价 ¥99
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 3108 人已学习

拼团 ¥99 原价 ¥129
MySQL实战45讲

林晓斌  网名丁奇,前阿里资深技术专家

48讲 | 44239 人已学习

拼团 ¥79 原价 ¥99