vue 笔记

指令:

v-bind

v-on

v-model

v-html

生命周期:

不要在选项属性或回调上使用箭头函数, 比如

模板语法 vs JSX 语法

在模板中放入太多的逻辑会让模板过重且难以维护

计算属性缓存 vs 方法

计算属性是基于它们的依赖进行缓存的, 计算属性只有在它的相关依赖发生改变时才会重新求值.相比之下, 每当触发重新渲染时, 调用方法将总会再次执行函数.

指令配合计算属性很强大

当在一个自定义组件上使用 class 属性时, 这些类将添加到该组件的根元素上,不会覆盖之前的

vue 的 :style 会自动添加前缀

Truthy vs falsy

false, 0, '', null, undefined, NaN

v-if 中碰到相同的元素，用 key 来管理

v-show 不支持 <template> 元素，也不支持 v-else

v-for 在遍历的时候，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的

数组更新监测

变异方法( 改变了原来的数组 )

push, pop, shift, unshift, splice, sort, reverse,

非变异( 返回新数组 )，非常常用

filter, concat, slice

由于 JS 的限制，监测不到变动：

利用索引

解决方式：Vue.set(example1.items, indexOfItem, newValue)

或者：example1.items.splice(indexOfItem, 1, newValue)

修改数组的长度

解决方式： example1.items.splice(newLength)

对象属性的添加和删除

解决方式：Vue.set(vm.obj, 'key', 123)

或者：this.userProfile = Object.assign({}, this.userProfile, { age: 27 })

v-for 和 v-if 处于同一节点，v-for 的优先级更高

在使用 ul - li 且 li 打算用组件，请使用 is="component"，.vue 的组件不受影响

因为 ul 内只有 li 是合法的

事件修饰符：

.stop .prevent .capture .self

.once可以被用到自定义的组件事件上

不应该在子组件改变 prop，如果非要改变：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

或者

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

组件

可以认为组件是自定义元素

所有的 vue 组件同时也都是 Vue 的实例，可以接受相同的选项对象

全局注册

Vue.component('my-component', {})

单向数据流

一个原则不要更改传入的 prop，如果非要更改：

使用 data 初始化，或者计算属性

另外尽量减少传入对象或数组的 prop

.sync 用来弥补子组件不能改变父组件状态的语法糖

<comp :foo.sync="bar"></comp>

// 扩展
<comp :foo="bar" @update:foo="val => bar = val"></comp>
// 需要更新的时候子组件调用
this.$emit('update:foo', newValue)

非父子组件的通信

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

变异作用域

// 无效
<child-component v-show="someChildProperty"></child-component>

https://cn.vuejs.org/v2/guide/components.html#单个插槽

Keep-alive 避免动态组件重复渲染

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。

动画

单元素/组件的过渡

有 transition 组件中的元素时，三个步骤：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

CSS 过渡类名：

v-enter, v-enter-active, v-enter-to

v-leave, v-leave-active, v-leave-to

transition:

一个进入/离开的过渡中：第一帧出现 v-enter 和 v-enter-active，然后下一帧移除 v-enter，v-enter-to 生效，在执行完所有动画后移除 v-enter-to 和 v-enter-active，一般情况下在 v-enter-active 中写入过渡时间，延迟和曲线函数等

animation:

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除

过渡模式

In-out out-in

多个组件的过渡

列表过渡

v-move: 它会在元素的改变定位的过程中应用。

可复用的过渡

函数组件更适合完成这个任务

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})

# vue 笔记

# 模板语法 vs JSX 语法

# 计算属性缓存 vs 方法

# 数组更新监测

# 组件

# 动画

# 单元素/组件的过渡

# 过渡模式

# 多个组件的过渡

# 列表过渡

# 可复用的过渡