setup基本介绍

1.第一个vue3程序，重温经典双向绑定

学写第一个vue3程序，感受从vue2到的vue3的平滑过渡。

<script src="https://unpkg.com/vue@next"></script>
 <body>
   <div id="app">
     <h3>经典的双向绑定</h3>
     <input v-model.trim="msg" />
     <div>
        {{msg}}
     </div>
   </div>
   <script>
     const { createApp } = Vue
     const app = createApp({
       data() {
          return{
            msg: 'hello vue3'
          }
       }
       // 正常写其它配置，methods,computed...
      })
    // 每一个vue应用从创建应用实例开始。
    // 1. app是应用实例
    // 可以在app上封装应用级别的组件，过滤器，指令
    // app.component('SearchInput', SearchInputComponent)
    // app.directive('focus', FocusDirective)
    // app.use(LocalePlugin)
    // 2. vm是根组件，当挂载整个应用时，它是渲染的起点。
    // 定义在data中的属性，将通过vm暴露出来
    const vm = app.mount("#app")
    // vm.msg = '你好，vue3'
</script>
 </body>
</html>

注意事项：

app 是应用实例, vm是根组件。

app.mount()的作用是把vue应用实例挂到指定的dom容器中，它的返回值是整个应用的根组件，你可以通过vm.msg来访问数据，或者是修改数据来体现响应式的效果。

createApp()这个函数的参数一个对象，它是根组件的配置项:

data必须要用函数返回值的写法，

如果在配置项中设置了template，则渲染的内容会以template为准。

2.认识setup配置项

<script src="https://unpkg.com/vue@next"></script>
<body>
 <div id="app">
   <h3>setup</h3>
   {{a}} - {{b}}
   <button @click="f">f函数</button>
 </div>
 <script>
   const { createApp } = Vue
   const app = createApp({
     data() {
        return {
          a: 1
        }
     },
     setup() {
      console.log('setup ....')
      return {b: 2, f: function(){console.log('f')}}
     },
     created() {
      console.log('created ....')
      console.log(this.a)
      console.log(this.b)
      setTimeout(()=>this.b=100, 2000)
      this.f()
     }
    })
   app.mount("#app")
</script>
</body>

要点：

这个钩子会在created之前执行

它的内部没有this

如果它的返回值是一个对象，则这个对象中的键值对最终会合并到created钩子中的this中去，从而在视图上也能访问相应的数据值（例如上面代码中的b和函数f）

不做特殊处理的情况下，它的数据不会有响应式的效果: 你修改了b的值，并不会引起视图的更新。

posted @ 2022-05-11 11:55 青柠~ 阅读(163) 评论(0) 收藏举报

刷新页面返回顶部

青柠~

setup基本介绍

公告