VUE3语法糖 总结ing……

VUE3语法糖 总结ing……

VUE3官网https://cn.vuejs.org/guide/essentials/application.html

简单示例代码：

<script setup>
import { ref, reactive, watch } from 'vue';
import { RouterView, useRoute } from 'vue-router'
// 组件注册
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";

// 定义数据
let asideSettings = reactive({
  isCollapse: true,
  width: "200",
});
// 定义响应式数据
let message = ref("Hello, Vue 3!");
let isHome = ref(true);
// 定义响应式对象
let user = reactive({
  name: 'Alice',
  age: 30,
});
// 定义响应式数组
let list = reactive([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
]);


// 方法
const changeAside = () => {
  console.log(asideSettings.isCollapse)
  asideSettings.isCollapse = !asideSettings.isCollapse;
  if (asideSettings.isCollapse) {
    asideSettings.width = "64";
  } else {
    asideSettings.width = "200";
  }
};
// 获取路由判断是否为首页
let route = useRoute();
// console.log(route.path)
// 监听路由变化
watch(
  () => route.path,
  (newRoute) => {
    console.log(newRoute)
    if (newRoute === '/') {
      isHome.value = true;
    } else {
      isHome.value = false;
    }
  }
);
</script>

script setup 语法：是一种更简洁、更直观的组件逻辑编写方式，无需使用 data、methods 等选项。（注意：在使用路由route、watch等方法或对象时，要先引用。）

ref:响应式的引用值（）

• 定义：let isHome = ref(“勇敢牛牛”);
• 改变引用值isHome.value = “不怕困难”;

reactive:响应式的对象或数组

• 定义：
  let user = reactive({
  name: ‘Alice’,
  age: 3,
  });
• 改变引用值user.age = 6;

关于reactive:响应式的对象或数组的案例

// 定义响应式数组
let list = reactive([]);

const onSubmit = () => {
  getUserList().then((res) => {
    //……省略
    list = res;
    console.log(list)
  })
}
<h1>{{ list }}</h1>
结果发现不行！？


这种是可以的
let list = ref([]);

const onSubmit = () => {
  getUserList().then((res) => {
    //……省略
    list.value = res;
    console.log(list)
  })
}
<h1>{{ list }}</h1>

这种也是可以的
// 定义响应式数组
let list = reactive({
  arr: []
});

const onSubmit = () => {
  getUserList().then((res) => {
    //……省略
    list.arr = res;
    console.log(list)
  })
}
总结：定义数组或对象时，直接list=res这种会失去响应式，需要使用
list.arr = res这种方式来实现数据响应。

似乎太基础了点，留档，以后接着记录