20分钟---Vue2-＞Vue3

Vue官网地址：gVue.js - The Progressive JavaScript Framework | Vue.js

选项式vs组合式

vue的两种风格，搬运官网源码：

选项式 API (Options API)​

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

组合式 API (Composition API)​

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 

创建vue3项目

vue create yf_vue3_1

选择vue3

进入创建的yf_vue3_1项目中

cd yf_vue3_1

通过上图的提示，使用

npm run serve

启动项目即可

vue3核心语法

保留了绝大部分的vue2语法

响应式的基本类型ref()

ref(0) ref("abc"),操作值需要加.value，具体原理可以参考ts中的proxy部分。

响应式的对象类型reactive()

综合例子：

浅响应shallowReactive

如果修改根属性，则多维属性会一起修改。如果只修改role这个多维属性，则不会修改。

const showData = shallowReactive({
  name: "有风",
  role: ["admin", "admin1"],
});
function updateData() {
  //showData.name = "程序猿有风";
  showData.role.push("admin2");
}

计算属性computed

const getRole = computed(() => {
  return showData.role;
});

watch与watchEffect

//监听基本属性
watch(username, (newVal, oldVal) => {
  console.log(newVal + "---" + oldVal);
});
//监听reavtive中的单个属性
watch(
  () => showData.name,
  (newVal, oldVal) => {
    console.log("监听reavtive中的单个属性:" + newVal + "---" + oldVal);
  }
);
//监听reavtive中的多个属性
watchEffect(() => {
  console.log("监听多个属性:" + showData.name + "---" + showData.role);
});

最终的完整源码