终于，我也来学习VUE了

emmm…
一个phper，也来学习VUE啦~
（回炉学习笔记）

插槽

构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我们希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。插槽是传递复杂内容的一种方式，仅是因为在使用模板中无法使用简单的属性传递复杂的内容。
作用域插槽->返回组件的函数

双向绑定

本质上是监听事件再更新数据，例：
text或textarea元素使用value属性和input事件

组件更新

数据来源(单向):
1. 来自父元素的属性
2. 来自组件自身的状态 data
3. 来自状态管理器, 如: vuex, Vue.observable

状态 data vs 属性 props
1. 状态是组件自身的数据
2. 属性是来自父组件的数据
3. 状态的改变未必会触发更新
4. 属性的改变未必会触发更新

Vue 的”响应式”, 是指当数据改变后, Vue 会通知到使用该数据的代码, 即视图随数据更新而改变.

状态 data:
1. 数据放在 return 里面才会做响应式
2. return 里面对象里未声明的字段, 也不会做响应式
3. 对数组的直接操作会做响应式
4. 在 return 里声明的字段, 在视图层未使用的字段也不会做响应式

因此在使用时需要注意:
1. 在视图层要用到的数据需要在 return 里先声明
2. 业务逻辑需要, 但不需要在视图层使用的数据, 可以放在 return 外面, 用 “this.“ 声明和使用

computed vs watch

计算属性 computed:
1. 减少模板中的计算逻辑
2. 数据缓存
3. 依赖固定的数据类型(响应式数据)

侦听器 watch
1. 更加灵活, 通用
2. watch 中可以执行任何逻辑, 如: 函数节流, Ajax 异步获取数据, 甚至操作 DOM
3. 当需要在数据变化时执行异步或开销较大的操作时使用
4. 可以嵌套监听, 如: “a.b”
computed能做的，watch也能做，反之不行
能用computed尽量用computed
$forceUpdate强制更新的意思，不管数据是否变化

v-if vs v-show

1. v-if 是”真正”的条件渲染, 因为它会确保在切换过程中条件块内的事件侦听器和子组件适当地被销毁和重建.
2. v-if 也是惰性的：如果在初始渲染时条件为假, 则什么也不做——直到条件第一次变为真时, 才会开始渲染条件块.
3. v-show, 不管初始条件是什么, 元素总是会被渲染, 并且只是简单地基于 CSS 进行切换(通过设置 style=”display: none;” 进行切换).
4. 一般来说, v-if 有更高的切换开销, 而 v-show 有更高的初始渲染开销. 因此, 如果需要非常频繁地切换, 则使用 v-show 较好; 如果在运行时条件很少改变, 则使用 v-if 较好.

   Vuex

   Vuex 也是一个单向的一个数据流：
   Vuex 提供数据 State 来驱动我们的视图（Vue Components）的渲染（Render），然后再通过视图派发（ Dispatch ）我们的 Action ，我们在 Action 中可以进一步的进行一些异步的操作，譬如我们通过 Ajax 去后端去获取一些我们想要的一些后端的一些数据。然后我们通过 commit 的形式将 Action 提交给我们的 Mutations ，最后由 Mutations 处理完毕后，再来最终更改我们的 State中的数据，如此循环。

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit(‘’,params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath(‘’)
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

注

alias vue='winpty vue.cmd'解决vue create demo 不能上下移动问题

本作品采用《CC 协议》，转载必须注明作者和本文链接