Vue3+Ts面试题

350 阅读2分钟

setup和正常写data;methods有什么关系呢

setup和传统配置项可以不可同时存在?

可以

<script lang="ts">
export default {
  name: "Person",
  data() {
    return {
      a: 100,
    };
  },
  methods: {
    b() {
      console.log("b");
    },
  },
  setup() {
    //数据
    let name = "张三"; //这样定义的name不是响应式的
    let age = 18;
    let tel = "138111111";

    //方法
    function changeName() {
      name = "zhang-san";
    }
    function changeAge() {
      age += 1;
    }
    function showTel() {
      alert(tel);
    }

    return { name, age, changeName, changeAge, showTel };
  },
};
</script>

如果冲突了以谁为主? 不晓得

我的配置项能不能读取setup中的东西? setup不能用this,但是data和methods可以使用this

<script lang="ts">
export default {
  name: "Person",
  data() {
    return {
      a: 100,
      c:this.name//再template中{{c}}会输出再setup中定义的name,也就是张三
      //因为setup执行的比data要早
    };
  },
  methods: {
    b() {
      console.log("b");
    },
  },
  setup() {
    //数据
    let name = "张三"; //这样定义的name不是响应式的
    let age = 18;
    let tel = "138111111";

    //方法
    function changeName() {
      name = "zhang-san";
    }
    function changeAge() {
      age += 1;
    }
    function showTel() {
      alert(tel);
    }

    return { name, age, changeName, changeAge, showTel };
  },
};
</script>

setup能不能读取配置项中的东西? 不能--setup不能用this,定义的还比data早,当然不能

在使用watch监听ref对象类型时,为什么watch监听的第二个参数接收到的新旧参数有时相同,有时不同?

因为在只修改对象类型的局部而不修改整体的时候,会出现newValueoldValue相同的情况,是因为没有修改整体就没有新旧地址的区分,在只修改局部属性时,修改后oldValue拿到的是修改后的对象,而newValue拿到的也是修改后的对象,所以就会出现新旧相同的情况。在修改整个对象时,newValue拿到的就是新对象,oldValue拿到的是旧对象。一般开发中不会使用到旧的值,将第二个参数直接填写为value拿到新的值即可。