vue3入门总结

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类型就返回现在的类型

待补充....