Vue 开发实战
唐金州
一点资讯前端技术专家,Ant Design Vue 作者
60939 人已学习
新⼈⾸单¥59
课程目录
已完结/共 53 讲
Vue 开发实战
登录|注册
留言
11
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 09 | 双向绑定和单向数据流不冲突
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 课程介绍
02 | Vue简介
03 | 内容综述
05 | 组件基础及组件注册
04 | 第一个Vue程序
06 | Vue组件的核心概念:事件
07 | Vue组件的核心概:插槽
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
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 | 生态篇习题解答(下)
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 | 如何做好组件的单元测试
52 | 如何发布组件到npm
53 | 结课测试&GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
本节摘要
登录 后留言

全部留言(11)

  • 最新
  • 精选
Cander
老师你好, 我的理解是vue在实例化的时候, 会对data对象中的每一个属性, 去做数据跟踪, 但是在写业务逻辑时, 会有很多的属性其实在视图层根本用不到, 但是这个属性在下面的methods的方法中会用到, 比如下面的代码: export default { data () { return { title: 'xxx', // 这个属性需要在视图层用到, 需要加上数据跟踪 loginStatus: false, // 这个属性在视图层用不到, 但是在methods的方法中要用来改变和作为判断条件, 根本不需要加入数据跟踪 } } } 但是改写成这样以后, 不需要跟踪的就不会跟踪了, 但是这样会有什么问题吗? 目前不知道如何去验证 export default { data () { this.loginStatus = false // 这样这个属性就不会加上数据跟踪, 但是下面的方法还可以 this.loginStatus 的去使用 return { title: 'xxx' // 这个属性需要在视图层用到, 需要加上数据跟踪 } } } 请问老师你在处理这种视图层用不到, 但是需要存储下面的逻辑状态的时候是怎么处理的呢?

作者回复: 和你的处理方式一样 😄

2019-04-05
8
10
没太明白,网上说VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。也是一直这么理解的,那老师的解释,是和这个API没有关系吗? 实际上是通过事件的回调来更新数据的?v-model 只是一个语法糖。

作者回复: 对的 双向绑定只是语法糖,get和set的改写只是做响应式更新视图的 这两块东西本可以没有关系的 但已经被众多文章把他们关联在了一起 好像成了既定的事实 如果面试过程中问到的话,倒也是可以扩展着讲讲这块的内容

2019-03-20
2
7
young
老师,我研究了好久v-model和.sync觉得它们都可以实现双向绑定,而且原理都是当子组件的状态发生变化时向父组件发送一个事件,然后父组更新本地的属性来实现双向绑定!这两种用法分别用在什以场景?

作者回复: 一个组件需要提供多个双向绑定的属性时使用,你只能选用一个属性来提供 v-model 功能,但如果有其他属性也要提供双向绑定,就需要.sync

2019-04-05
3
geeeee
v-model,只能双向绑定组件的一个属性,如果想要组件的多个属性都能实现双向绑定该怎么办?

作者回复: .sync 修饰符

2019-04-15
2
SHINE
单项数据流说的不是父级 prop 的更新会向下流动到子组件中,但是反过来则不行这样一个意思吗, 组件中的双向绑定的使用场景一般有哪些呢,感觉是不是一般用到的很少啊

作者回复: 可以这么理解 所有的改动都要从父级改动 场景很多啊,最常用的就是输入框了

2019-07-01
2
1
小文同学
刷了n次这节课,一边实践一边看,终于看明白单项数据流和双向绑定的关系了。写上了第一个自己的vue组件。技术果然是需要一点点思考实践才能纳入自己的工具箱里

作者回复: 👍👍👍

2019-06-17
1
Rachel
老师,我把您的代码克隆下来后,npm install 一直报错,无法正常运行,这是什么原因,我的vuecli 是3.6.0版本的,node是10.多版本的

作者回复: 网络问题? 可以尝试使用淘宝npm源,http://npm.taobao.org/

2019-04-14
1
bolingboling
如果想在调用子组件时使用语法糖的写法,子组件触发的事件命名必须有约束,触发事件名要定义为 `update:eventName` ,`update:`是固定写法,`eventName`可以自定义,是这样吗? 比如我想触发的事件是`updata_eventName`时,语法糖就不能用了,我的理解对吗?

作者回复: 不能用update:update_eventName ?

2019-04-09
1
旷老米饭
程序员为了“偷懒”,哪怕一个非常简单的功能,都会想办法抽象出来,提供复用,完美!
2020-03-29
8
NikkiZeng
没太明白,网上说VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。也是一直这么理解的,那老师的解释,是和这个API没有关系吗? 实际上是通过事件的回调来更新数据的?v-model 只是一个语法糖。关于静同学的这个疑问,网上几乎都是Object.defineProperty() 来解释的,老师是否能够再单独讲一下,如果原生JS是如何实现的呢
2020-04-02
1
收起评论