setup基本介绍

2022-05-11 12:00:07 阅读：227 来源： 互联网

标签：基本 const setup vm 介绍 vue3 console app

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的值，并不会引起视图的更新。

标签：基本,const,setup,vm,介绍,vue3,console,app
来源： https://www.cnblogs.com/zjz-527/p/16257396.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

setup基本介绍