vue3新特性1

一、创建一个vue3.0项目

请添加图片描述
请添加图片描述
请添加图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vscode打开项目

二、对比vue2的新特性

1、set up、ref和reactive

以前的data、声明周期、自定义函数都可以放置在set up内,setup是相当于beforeCreate和created生命周期钩子, beforeCreate和created钩子中编写的任何代码都可以直接在setup函数中编写。在 setup 函数中必须 return 出去才可以在模板区域使用。

ref 是 vue 3.0 的新特性,其作用为创建响应式的值

reactive 是 vue 3.0 的,其作用为创建响应式的对象或数组

<template>
  <p>姓名:{{ name }}</p>
  <p>初始年龄:{{ age }}</p>
  <p>当前年龄:{{ curAge }}</p>
  <div>
    学生信息:
    <p>姓名:{{student.name}}</p>
  <p>性别:{{student.sex}}</p>
  <p>地址:{{student.address}}</p>
  </div>
  <button @click="add">长大</button>
  <br>
  <button @click="addressChange">修改地址</button>
</template>

<script >
import { ref,reactive } from "vue";//使用前,先引入
export default ({
  name: "",
  components: {},
  setup() {
    let name = ref("小明");
    let age = 18;
    let curAge = ref(age);//ref包裹普通数据
    console.log("name", name);
    //reactive包裹对象
    const student=reactive({
       name: '小红',
       sex: '女',
       address: '上海',
    });

    const add = () => {
      curAge.value++;//ref值获取要用.value
      // age++;
      console.log("age", age);
      console.log("curAge", curAge.value);
    };
    const addressChange = () => {
      student.address += '浦东'
    }
    return {
      name,
      age,
      curAge,
      add,
      student,
      addressChange,
    };
  },
});
</script>

2、生命周期

vue2.0vue3.0说明
beforeCreatesetup组件创建之前
createdsetup组件创建完成
beforeMountonBeforeMount组件挂载之前
mountedonMounted组件挂载完成
beforeUpdateonBeforeUpdate数据更新,虚拟 DOM 打补丁之前
updatedonUpdated数据更新,虚拟 DOM 渲染完成
beforeDestroyonBeforeUnmount组件销毁之前
destroyedonUnmounted组件销毁后

vue3.0的生命周期是从vue中到出,我们需要什么就引入什么。常用的生命周期是挂载相关的。这样会使得最终编译项目的体积减小。除set up之外,其他的生命周期函数都是在set up里面直接书写。

life.vue

<template>
  <div class="home" >
    <lifeCycle v-if="bool"></lifeCycle>
    <button @click="isShow">点击隐藏</button>
  </div>
</template>
<script>
import {ref} from 'vue'
import lifeCycle from '@/components/lifeCycle.vue';
export default {
  components: {lifeCycle },
  setup () {
    let bool = ref(true);
    //点击隐藏组件,实现组件销毁时触发销毁周期函数
    const isShow = () => {
      bool.value=!bool.value;
    }
    return {
      bool,
      isShow,
    }
  }
}
</script>

lifeCycle.vue

<template>
  <div class="home" >   
    计数器 >>> <span class="red" >{{count}}</span> <br>
    <button @click="countAdd">点击加数字</button>
  </div>
</template>
<script>
// 你需要使用到什么生命周期,就引出来什么生命周期
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,//销毁前
  onUnmounted,//,销毁后
  ref
} from 'vue'
export default {
  // setup 函数,就相当于 vue 2.0 中的 created
  setup () {
    const count = ref(0);
    let bool = ref(true);
    // 其他的生命周期都写在这里
    onBeforeMount (() => {
      count.value++
      console.log('onBeforeMount', count.value)
    })
    onMounted (() => {
      count.value++
      console.log('onMounted', count.value)
    })
    onBeforeUpdate (() => {
      console.log('onBeforeUpdate', count.value)
    })
    onUpdated (() => {
      console.log('onUpdated', count.value)
    })
    onBeforeUnmount (() => {
      console.log('onBeforeUnmount', count.value)
    })
    onUnmounted (() => {
      console.log('onUnmounted', count.value)
    })
    // count++
    const countAdd = () => {
      count.value++
    }
    return {
      count,
      countAdd,
    }
  }
}
</script>

初始:
请添加图片描述

点击加:

请添加图片描述

点击隐藏:(隐藏是挂载在组件上的)
请添加图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘夏520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值