vue3入门总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue3入门总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1229字，纯文字阅读大概需要2分钟。

内容图文

script中的内容变化

没有data了,方法和data都写在setup(){....}中,这是vue3最显著的一个变化,这个东西叫做组合式api

setup

里面定义普通数据类型用ref定义,定义对象类型用reactive定义,用reactive定义能深度响应,否则用ref的话就只能最外面的一层响应
代码示例

      const dialogTitle = ref<string>("字典信息");
      const searchList = reactive<Searchlist>({
        first: [
          {
            label: "",
            key: "type",
            type: "input",
            placeholder: "请输入字典类型",
          },
        ],
      });

写方法的话就直接写function或者字面量形式创建就行了
所有需要在模板中使用的数据都需要在return中返回

setup(){
...
return {
    //用到的数据
}
}

ref获取节点实例

这个ref与定义数据的ref并不冲突,获取dom的步骤

1. 在结点上写ref<AddModal ref="visible" :form="form"></AddModal>
2. setup中定义这个值 const visible = ref(null);
3. setup中的return把这个值返回

vue3中的props和emit

因为所有的东西都在setup中写了,想要再setup中使用props和emit需要先接收参数

emits:["父方法名"]
setup(props,{emit}) {
//使用
  props.数据
  emit("父方法名", 参数);
}

如果只用emit,那么setup第一个参数用下划线占位

setup(_, { emit }) {...}

js语法

工作中用到一个es2020的新语法 ?.
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

vue3遇见的新东西

unref

作用是返回数据,如果这个数据是ref类型就返回ref类型,如果不是ref类型就返回现在的类型

待补充....

内容总结

以上是互联网集市为您收集整理的vue3入门总结全部内容，希望文章能够帮你解决vue3入门总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---