上一级页面：vue-js-学习索引

本系列关注前端部分,根据学习路线图达到学习Vue.js的目的

developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap

前言

生命周期

注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。

最常用的是 mounted、updated 和 unmounted。随用随查就行。

侦听器

注意一下语法就行：

watch: {
    // 每当 question 改变时，这个函数就会执行
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },

语法

Intercepted(newValue,oldValue)
Intercepted(newValue)

深层侦听器

下面举出一个例子，关键是deep: true

export default {
  data() {
    return {
      author: {
	      name: "乔治-奥威尔",
	      book: "动物庄园"
      }
    };
  },
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
        return (this.author.book == "动物庄园") ? "yes" : "no"
      },
      deep: true
    }
  }
}

即时回调的侦听器

immediate: true

回调的触发时机

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

this.$watch()

如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。它还允许你提前停止该侦听器。

停止侦听器

有印象就行

模板引用

随用随查

访问模板引用

<script>
export default {
  mounted() {
	  // 做点什么，例如做input.focus().聚焦到输入框
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

v-for 中的模板引用

很新的特性，有机会用了再说

应该注意的是，ref 数组并不保证与源数组相同的顺序。

函数模板引用

这里需要使用动态的 :ref 绑定才能够传入一个函数。

当绑定的元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null。

也可以绑定一个组件方法而不是内联函数。

组件上的 ref

应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。

expose 选项可以用于限制对子组件实例的访问

vue-js-学习-9-组件基础

vue-js-学习-9-组件基础

参考、引用、致谢