-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
数据!数据! #9
Comments
预览源码LC |
预览 |
问题一1.在非严格模式下:
用之前的方法会报错,那么用『Vuex 的思维』去解决这个问题的方法是:给 中绑定 value,然后侦听 input 或者 change 事件,在事件回调中调用 action。代码还未实现,有些不熟练😂 问题二:多次 import 同一个文件,会怎样?最近在写react的时候,所有子组件中都要写
我在 问题三:为什么要写 white-space: pre-line合并空白符序列,但是保留换行符。 |
问题一1.在非严格模式下:
用之前的方法会报错,为什么会报错? 那么用『Vuex 的思维』去解决这个问题的方法是:
|
1.不会自动更新,是因为input的更新的值没有绑定到state上,双向绑定即可。 |
#ifinclude xxx
|
问题一: 在页面左边修改 resume,会发现 ResumePreview 不会自动更新,你该怎么办呢 问题二:多次 import 同一个文件会怎么样? 问题三: |
问题1 问题2: 问题3: |
|
|
现在你在页面左边修改 resume,会发现 ResumePreview 不会自动更新,你该怎么办呢?
Q: 多次 import 同一个文件,会怎样? |
一、现在你在页面左边修改 resume,会发现 ResumePreview 不会自动更新,你该怎么办呢? |
问题:
或(v-model就是下面的语法糖,双向绑定 = 单向绑定 + UI 事件监听):
2.多次 import 同一个文件,会怎样? 3.为什么要写 white-space: pre-line? |
问题1将v-bind改成v-model双向绑定 问题2
问题31.多次import同一个文件会怎样,webpack不会打包多次,只会引入已经打包好的。 |
1,现在你在页面左边修改 resume,会发现 ResumePreview 不会自动更新,你该怎么办呢?
2,实现上面的效果,回复在下面(源码+预览) |
接下来我们来做预览功能。
首先想一个问题:
当然是从 ResumeEditor 来,对吧。
方案一:
那么最傻的办法就是在 ResumePreview 里面去读 ResumeEditor 的 data。
这种办法可以是可以,但是有一个「耦合性」太高的问题。
假设 ResumePreview 代码是这样的:
你会发现,ResumePreview 严重依赖 ResumeEditor,换句话说,ResumePreview 必须和 ResumeEditor 在一起,ResumePreview 不能从其他的地方读入 resume 数据。
这样的代码就很不优雅。
方案二:
讲数据抽离出来。我们能不能把 resume 的数据独立出来,专门供 ResumeEditor、ResumePreview 甚至其他组件来使用呢?可以。大概思路是这样:
这样一来,ResumeEditor 和 ResumePreview 互不干涉,只是数据来自同一个地方。
ResumeEditor 改了 resume 之后,由于 ResumePreview 用的是同一个 resume,所以立马就知道 resume 变化了(Vue.js 可以监听任意一个对象的变化)。
Vuex
全局数据源
基于方案二,我们再进一步想,为什么不把所有的数据都交给 globalData 来控制呢?
上文中 ResumeEditor 的 selected 属性没有交给 globalData 管理,万一另一个组件要用这个 selected 呢?所以我们还不如把所有的数据都交给 globalData 来控制。
这样,globalData 就叫做全局数据源,管理所有的数据。
双向绑定 V.S. 单向绑定
前面我们学过,可以用 Vue.js 添加双向绑定:
实际上,双向绑定不是魔法,上面的代码基本等价于
也就是说:
通过这个 JSBin 你应该可以理解这一点。
那么 Vuex 为什么要推荐单向绑定呢?
为了「控制欲」。
双向绑定是很方便,因为 data 和页面内容是自动同步的。
但是成也萧何败萧何。正是因为这个「自动同步」,所以有些人不喜欢双向绑定。「自动同步」意味着你不知道 data 什么时候就变了(when),也不知道是谁变的(who),变成了什么也不通知你(what)。
当然你可以加一个 watch 来监听 data 的变化。但这就显得很复杂了。
单向绑定牺牲一部分的便捷性,换来更大的「控制力」。
单向绑定大概的思路就是:
data -> 页面
单向绑定)你会发现单向绑定的思路其实也有双向绑定的意味,只不过重点在于「不是自动的」。
单向绑定还有其他优点,请看这个知乎问答。
使用 Vuex
Vuex 就是单向数据绑定的践行者之一了。
你需要先过一遍 Vuex 的文档,来了解 Vuex。你需要:
如果不通读 Vuex 文档,并运行其中的例子,之后的代码你肯定无法理解!
通读文档非常重要!我讲得再多也没文档讲得清楚。
引入 Vuex
首先我们要把 Vuex 文档里最简单的例子运行在我们的页面里:
改写 data
我们把 selected 和 resume 移到 store 里会发现 tab 无法切换了。
这是因为默认 computed 只能用于读数据,如果你还想写数据,就要用到 Vue 的 setter / getter 功能 了。
如果你想知道如何实现 setter 和 getter,就看 MDN 的文档
ResumeEditor 和 ResumePreview 使用同一个 store
你可以看到我们的 store 是放到
<App />
上的,所以所有组件都可以使用this.$store
来访问到它。(为什么要以 $ 开头?Vue 习惯如此,所有全局的东西都用 $ 开头,跟 jQuery 无关)那么我们来试试在 ResumePreview 里访问 resume 数据。
这个时候你刷新页面,就能在 ResumePreview 里面看到 resume 啦。
接下来我们让 ResumePreview 变得完整点、好看点:
好了,我们完成了 ResumePreview 并且引入了 Vuex。
致饥人谷学员
请依次回答上面三个问题。
我的预览的:https://jirengu-inc.github.io/jrg-project-5/step-8-resumer/dist/#/
预告
The text was updated successfully, but these errors were encountered: