vue基本语法

前言

Vue3 发布于2020年9月18日。相对于 Vue2，Vue3 在性能上有很大提升。

Vue3 目前是国内极具流行的前端框架，现在你去找前端工作，一般的公司都要求你会用 Vue3。

那相对于 Vue2，Vue3在语法上有哪些改变呢？

其实熟悉 Vue2 开发流程的都清楚：Vue2 使用起来相对固定，都是在 data 函数里面写数据 ，在 methods 函数里面写方法。

而 Vue3 将数据和方法糅合在一起，也就是将业务代码放在一块，便于你维护。

其实要我说，写习惯了都一样，代码的尽头还是复制粘贴。。。

1.生命周期

Vue3 的生命周期函数主要有 7 个：

1.setup：开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。

2.onBeforeMount：DOM 挂载之前。

3.onMounted：DOM 挂载之后。

4.onBeforeUpdate：组件更新之前。

5.onUpdated：组件更新之后。

6.onBeforeUnmount：组件卸载之前。

7.onUnmounted：组件卸载之后。

在实际开发中经常用到的就是 onMounted，比如进入列表页面获取列表数据。

2.setup函数

setup 函数是 vue3 中很重要的组件，相当于生命的起点。Vue3 中其他组件或者函数必须被包含在 setup 函数中。

而且定义的变量或者函数、必须要通过 return暴露出来，不然在 template 中没法使用。

从这里你也看出痛点了：如果定义的变量和函数太多，return 起来比较麻烦。

<script >
  setup () {
    const message = '我是知否君'
    const num = ref(10)
    
    return { num,message }
  }
</script>

所以 Vue3.2 之后做了改变：

只用在 script 标签中添加 setup，不用写 setup 函数，不用 return，我们也能在 template 中使用。

3.ref函数

ref 函数用来将简单数据类型定义为响应式数据。

注意：vue 中的响应式指的是你在 script 标签中修改了变量的值，template 中该变量的值会立即改变，对应的页面上变量的值也会立即改变。

修改值: 变量.value

// ref函数，将简单数据类型定义为响应式数据，修改值的时候，需要.value
let poet = ref("李白");
const changePoet = () => {
  poet.value = "杜甫";
};

4.toRef函数

toRef 函数可以将对象中某个属性定义为单独的响应式数据

let user = reactive({
  name: "张无忌",
  age: 12,
});

// toRef 函数可以将对象中某个属性定义为单独的响应式数据
const name = toRef(user, "name");
const changeName = () => {
  name.value = "赵敏";
};

5.toRefs 函数

toRefs函数用来将对象中所有属性变为响应式数据

let user = reactive({
  name: "张无忌",
  age: 12,
});
// toRefs函数用来将对象中所有属性变为响应式数据
const refUser = toRefs(user);
const changeRefAge = () => {
  refUser.age.value = 18;
};

6.reactive函数

reactive 是一个函数，它可以将复杂数据类型变成响应式数据。

// reactive是一个函数，它可以将复杂数据类型变成响应式数据。
let user = reactive({
  name: "知否君",
  age: 23,
});

7.computed

computed 用来定义计算属性。

// computed 计算
const newPoet = computed(() => {
  return poet.value + ",白居易";
});

8.watch

watch 函数是监听器，用来监听变量的变化。

// watch 监听
watch(user, () => {
  console.log("user改变了");
});
watch(
  () => user.age,
  () => {
    console.log("age改变了");
  }
);