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類型就返回現在的類型

待補充....