关于vue的二三事 (1)

发表于

vue的双向绑定

双向绑定就是讲将DOM与data数据绑定到一起，彼此相互影响: 即DOM改变时会导致数据的改变; 数据改变时也会同步更新DOM

默认的双向绑定

Vue默认的对data里的数据进行了双向绑定. 把一个普通的 js 对象传给 Vue 实例的 data选项, Vue内部会在初始化时遍历此对象所有的属性, 并使用 Object.defineProperty把这些属性全部转为 getter/setter.

每个组件实例都有相应的 watcher 实例对象, 在组件渲染的过程中把属性记录为依赖, 之后当依赖项的 setter 被调用时, 会通知 watcher 重新计算, 从而致使它关联的组件得以更新. 下图是一个官网的图, 明确的展示了这个过程.

添加要双向绑定的属性

Vue 不能检测到对象属性的添加或删除, 但可以通过set方法将响应属性添加到嵌套的对象上

1
Vue.set(vm.someObject, 'b', 2)

声明相应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值

异步更新队列

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

也可以直接定义在下一个tick要执行的事件: Vue.nextTick(callback)

一些指令

常见指令

v-text

  • 解释：更新DOM对象的 textContent

    1
    <h1 v-text="msg"></h1>

v-html

  • 解释：更新DOM对象的 innerHTML
1
<h1 v-html="msg"></h1>

事件修饰符

  • .stop 阻止冒泡，调用 event.stopPropagation()
  • .prevent 阻止默认行为，调用 event.preventDefault()
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
  • .once 事件只触发一次

v-for

  • 作用：基于源数据多次渲染元素或模板块
1
2
3
4
5
<!-- item 为值，key 为键，index 为索引 -->

<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>

<p v-for="item in 10">{{item}}</p>

key属性

  • 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
  • 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
  • vue key
  • vue key属性的说明
1
2
3
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

样式处理 -class和style

  • 使用方式：v-bind:class=”expression” or :class=”expression”
  • 表达式的类型：字符串、数组、对象（重点）

v-if 和 v-show

  • v-if：根据表达式的值的真假条件，销毁或重建元素
  • v-show：根据表达式之真假值，切换元素的 display CSS 属性

提升性能的指令

提升性能：v-pre

  • 说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
1
<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

  • 说明：vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
1
<span v-once>{{ this will not be compiled }}</span>

过滤器 filter

有点像angular的管道

  • 作用：文本数据格式化

  • 过滤器可以用在两个地方

    1
    {{ dateStr | date }}

    和 v-bind

  • 两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

  • 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
  • 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
  • 显示的内容由过滤器的返回值决定
1
2
3
4
5
Vue.filter('filterName', function (value) {

  // value 表示要过滤的内容

})

示例：

1
2
3
4
5
6
7
8
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容，比如：dateStr
    // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
  })
</script>

局部过滤器

  • 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用
1
2
3
4
5
6
7
8
{
  data: {},
  // 通过 filters 属性创建局部过滤器
  // 注意：此处为 filters
  filters: {
    filterName: function(value, format) {}
  }
}

按键值修饰符

  • 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符

  • 键盘事件 - 键值修饰符

  • 其他：修饰键（.ctrl等）、鼠标按键修饰符（.left等）

    // 只有在 keyCode 是 13 时调用 vm.submit()
    @keyup.13=”submit”
    // 使用全局按键别名
    @keyup.enter=”add”
    // 通过全局 config.keyCodes 对象自定义键值修饰符别名
    Vue.config.keyCodes.f2 = 113
    // 使用自定义键值修饰符
    @keyup.enter.f2=”add”

监视数据变化 - watch

用于监听表达式的变化, 类似于在vue的基础上再定义set, 可通过deep来决定是否监听对象内部属性值的变化

  • 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数

  • 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

  • VUE $watch

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    new Vue({
      data: { a: 1, b: { age: 10 } },
      watch: {
        a: function(val, oldVal) {
          // val 表示当前值
          // oldVal 表示旧值
          console.log('当前值为：' + val, '旧值为：' + oldVal)
        },
        // 监听对象属性的变化
        b: {
          handler: function (val, oldVal) { /* ... */ },
          // deep : true表示是否监听对象内部属性值的变化 
          deep: true
        },
        // 只监视user对象中age属性的变化
        'user.age': function (val, oldVal) {
        },
      }
    })

    ​