vue3例子 Vue 3.0 实例方法

<template>
  <div>
    <h1>Hello World!</h1>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue'  // 导入ref函数 
export default {   // 导出组件实例对象 
  setup() {   // setup函数用来初始化组件内部数据和方法  

    const message = ref('Hello Vue 3!')   // 创建message变量并赋值

    return { message }   // 返回message变量  

  }   // setup函数结束  

 }   // 组件对象结束 

 </script>  // 组件代码结束 

 <style scoped lang="scss" >// 样式代码开始

 h1 { font-size: 2em;}

 p { font-size: 1.2em;}

 </style>// 样式代码结束 

#$watch

• 参数：

• {string | Function} source

• {Function | Object} callback

• {Object} [options]

• {boolean} deep
• {boolean} immediate
• {string} flush

• 返回：{Function} unwatch

• 用法：

侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。

• 示例：

  const app = Vue.createApp({
    data() {
      return {
        a: 1,
        b: 2,
        c: {
          d: 3,
          e: 4
        }
      }
    },
    created() {
      // 顶层property 名
      this.$watch("a", (newVal, oldVal) => {
        // 做点什么
      })

  
      // 用于监视单个嵌套property 的函数
      this.$watch(
        () => this.c.d,
        (newVal, oldVal) => {
          // 做点什么
        }
      )

  
      // 用于监视复杂表达式的函数
      this.$watch(
        // 表达式 `this.a + this.b` 每次得出一个不同的结果时
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        () => this.a + this.b,
        (newVal, oldVal) => {
          // 做点什么
        }
      )
    }
  })

当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组：

  const app = Vue.createApp({
    data() {
      return {
        article: {
          text: "Vue is awesome!"
        },
        comments: ["Indeed!", "I agree"]
      }
    },
    created() {
      this.$watch("article", () => {
        console.log("Article changed!")
      })

  
      this.$watch("comments", () => {
        console.log("Comments changed!")
      })
    },
    methods: {
      // 这些方法不会触发侦听器，因为我们只更改了Object/Array的一个property，
      // 不是对象/数组本身
      changeArticleText() {
        this.article.text = "Vue 3 is awesome"
      },
      addComment() {
        this.comments.push("New comment")
      },

  
      // 这些方法将触发侦听器，因为我们完全替换了对象/数组
      changeWholeArticle() {
        this.article = { text: "Vue 3 is awesome" }
      },
      clearComments() {
        this.comments = []
      }
    }
  })

$watch 返回一个取消侦听函数，用来停止触发回调：

  const app = Vue.createApp({
    data() {
      return {
        a: 1
      }
    }
  })

  
  const vm = app.mount("#app")

  
  const unwatch = vm.$watch("a", cb)
  // later, teardown the watcher
  unwatch()

• 选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

  vm.$watch("someObject", callback, {
    deep: true
  })
  vm.someObject.nestedValue = 123
  // callback is fired

• 选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

  vm.$watch("a", callback, {
    immediate: true
  })
  // 立即以 `a` 的当前值触发 `callback`

注意，在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

  // 这会导致报错
  const unwatch = vm.$watch(
    "value",
    function() {
      doSomething()
      unwatch()
    },
    { immediate: true }
  )

如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

  let unwatch = null

  
  unwatch = vm.$watch(
    "value",
    function() {
      doSomething()
      if (unwatch) {
        unwatch()
      }
    },
    { immediate: true }
  )

• Option: flush

flush选项允许更好地控制回调的时间。它可以设置为pre、post或sync。

默认值为pre，它指定在呈现之前应调用回调。这允许回调在模板运行之前更新其他值。

值post可用于将回调延迟到呈现之后。如果回调需要通过$refs访问更新的DOM或子组件，则应使用此选项。

如果flush设置为sync，则只要值发生更改，就会同步调用回调。

对于pre和post，回调都使用队列进行缓冲。回调只会添加到队列一次，即使关注的值更改多次。临时值将被跳过，不会传递给回调。

缓冲回调不仅可以提高性能，而且有助于确保数据一致性。在执行数据更新的代码完成之前，不会触发监视程序。

sync观察者应该谨慎使用，因为他们没有这些好处。

有关`flush`的详细信息，请参见[效果刷新计时](https://www.w3cschool.cn/vuejs3/vuejs3-35qs3f4h.html)。

• 参考 Watchers

#$emit

• 参数：

• {string} eventName
• [...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

• 示例：

只配合一个事件名使用 $emit：

  <div id="emit-example-simple">
    <welcome-button v-on:welcome="sayHi"></welcome-button>
  </div>

  const app = Vue.createApp({
    methods: {
      sayHi() {
        console.log("Hi!")
      }
    }
  })

  
  app.component("welcome-button", {
    template: `
      <button v-on:click="$emit("welcome")">
        Click me to be welcomed
      </button>
    `
  })

  
  app.mount("#emit-example-simple")

配合额外的参数使用 $emit：

  <div id="emit-example-argument">
    <advice-component v-on:give-advice="showAdvice"></advice-component>
  </div>

  const app = Vue.createApp({
    methods: {
      showAdvice(advice) {
        alert(advice)
      }
    }
  })

  
  app.component("advice-component", {
    data() {
      return {
        adviceText: "Some advice"
      }
    },
    template: `
      <div>
        <input type="text" v-model="adviceText">
        <button v-on:click="$emit("give-advice", adviceText)">
          Click me for sending advice
        </button>
      </div>
    `
  })

• 参考

• emits 选项

• 事件抛出一个值

#$forceUpdate

• 用法：

迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

#$nextTick

• 参数：

• {Function} [callback]

• 用法：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

• 示例：

Vue.createApp({
  // ...
  methods: {
    // ...
    example() {
      // modify data
      this.message = "changed"
      // DOM is not updated yet
      this.$nextTick(function() {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

• 参考 nextTick