setup()用法

hamimelon2020

已于 2022-02-28 13:05:00 修改

阅读量1.4k

点赞数

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

于 2022-02-28 12:37:12 首次发布

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123179693

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<div app="id" @click="increment">
  {{ count }}
</div>


    
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createdApp({});
  name:'increment'
  props: []
  setup() {
    data: {
      
    }

  }
      
</script>

这为啥也不行？

<!DOCTYPE html>
<div app="app">
  <button @click="increment"> {{ state.count }}</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const App = {
  setup() {
  const app = Vue.createdApp({count:0});
  function increment() {
    state.count++;
  }
  return {
    state,
    increment
  }
  }
  };
  const app = Vue.createdApp(App);
  app.mount('#app')
</script>

还是不行

<!DOCTYPE html>
<div app="app">
  <button @click="increment"> {{ state.count }}</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const App = {
  setup() {
  const state = Vue.reactive({count:0});
  function increment() {
    state.count++;
  }
  return {
    state,
    increment
  }
  }
  };
  const app = Vue.createApp(App);
  app.mount('#app')
</script>

总算行了：

<!DOCTYPE html>
<div id="app">
  <button @click="increment"> {{ state.count }}</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const App = {
  setup() {
  const state = Vue.reactive({count:0});
  function increment() {
    state.count++;
  }
  return {
    state,
    increment
  }
  }
  };
  const app = Vue.createApp(App);
  app.mount('#app')
</script>

为什么有的const app = Vue.createApp(App);在前面，有的在后面，有的里头啥也没有，有的有App
为啥有的地方是app，有的地方是App，都有啥意义？
为啥有的setup在props后面，里头含props，有的在const App后面。因为有的里头没有props。

为什么Vue.reactive({count:0})里头可以加count:0，还有别的行不行，可不可以加。还有别的表达方式吗，ref count:0这个。

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
setup()用法

<!DOCTYPE html><div app="id" @click="increment"> {{ count }}</div> <script src="https://unpkg.com/vue@next"></script><script> const app = Vue.createdApp({}); name:'increment' props: [] setup() { d
复制链接

扫一扫

专栏目录