Vue3复习和总结(base)Watch与指令与生命周期

最新推荐文章于 2024-08-26 15:57:51 发布

「已注销」

最新推荐文章于 2024-08-26 15:57:51 发布

阅读量907

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 es6 javascript html5

本文链接：https://blog.csdn.net/qq_31755699/article/details/121360853

版权

本文是Vue3的基础复习，涵盖Watch的使用，包括监听属性、异步操作和不同监听情况。还讨论了Vue3的指令，如渲染文本和HTML，以及跳过编译的场景。此外，文章详细解析了Vue组件的生命周期，从创建到卸载的各个阶段。

摘要由CSDN通过智能技术生成

Vue3复习和总结(base)Watch与指令与生命周期

代码全部放在->github仓库：https://github.com/zyugat/vue-review-all

前言：分为base、Component、router、Vuex、组合式API。5各部分。

base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli

Watch

用于监听属性，响应数据的变化，可以进行异步操作。

方法名是属性名，前一个参数代表新值，后一个参数代表旧值

<div id="app">
  <h2>{
  { a }}</h2>
  <br>
  <button @click="a++">改变 a 的值</button>
</div>
<script>
  const App = {
     
    data() {
     
      return {
     
        a: 0,
      }
    },
    watch: {
     
      a(newQuestion, oldQuestion) {
     
        console.log(newQuestion,'---',oldQuestion)
      },
    },

  }
  const app = Vue.createApp(App)
  app.component('', {
     })
  app.mount('#app')
&