vue3中的options方式 和 composition方式，效果不一样？！

• Z时代
• 2024-02-16
• 分类：IT

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.jpg" />
    {{ asd }}
    {{ zxc }}
    <button @click="test">test</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  // setup() {
  //   let asd = ref(1);
  //   let zxc = "x";
  //   function test() {
  //     asd.value = 2;
  //     zxc = "y";
  //   }
  //   return {
  //     asd,
  //     zxc,
  //     test,
  //   };
  // },
  data() {
    return {
      asd: 1,
    };
  },
  methods: {
    test() {
      this.asd = 2;
      this.zxc = "y";
    },
  },
  created() {
    this.zxc = "x";
  },
});
</script>

这段代码里，setup的方案，在页面点击test，zxc的变量不会更新，但是用下面的代码，options的方式就可以更新掉，有没有大神给解释一下为什么呢这是？

问题补充：当options模式test方法中那个响应式的asd如果只是掉的话，这个zxc是不会更新的，感觉像是这个zxc之所以更新，是在响应式的变量触发dom diff更新的时候发现zxc变量有变化顺带更新了，只是猜测，，，，，但是setup就不会，是为什么呢？

回答：

zxc 不是响应式的，实际上值变化了，但不会触发页面更新，加个 ref 即可

补充，可能是页面数据刷新机制导致的

  methods: {
    test() {
      // this.asd = 2 + Math.random();
      this.zxc = "y" + Math.random();
      console.log(this.zxc);
    },
  },

尝试注释对响应式变量的赋值，zxc 的值不会改变

回答：

data 函数返回的对象 会被 Vue 转换成响应式对象 而setup 里面 zxc 并不会被自动转换

二改：
setup 返回的对象会被 代理到this 上面去 ， zxc 因为是一个 基础类型 被直接赋值给 this了。 后续在setup外面操作的zxc跟setup里面的zxc已经没关系了。 如果是个对象因为引用的问题还能改到

以上是 vue3中的options方式 和 composition方式，效果不一样？！ 的全部内容， 来源链接： utcz.com/p/937180.html