标签：count img value vue3.0 特性 防盗链 外链 图片

一、创建一个vue3.0项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jZuEr8bu-1647775515823)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320174536841.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i71wbvrN-1647775515825)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320175828858.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMKzFRpF-1647775515826)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180132454.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjtDFo8E-1647775515827)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180316082.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhnvpO37-1647775515829)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180438677.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUhZ4eEf-1647775515830)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180711909.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kamaRfU5-1647775515830)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180839014.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fx9XvCem-1647775515832)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180942413.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1e9t85D-1647775515835)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320181100793.png)]

vscode打开项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v7ATUW2X-1647775515836)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320181216158.png)]

二、对比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.0	vue3.0	说明
beforeCreate	setup	组件创建之前
created	setup	组件创建完成
beforeMount	onBeforeMount	组件挂载之前
mounted	onMounted	组件挂载完成
beforeUpdate	onBeforeUpdate	数据更新，虚拟 DOM 打补丁之前
updated	onUpdated	数据更新，虚拟 DOM 渲染完成
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁后

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

<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)
    // 其他的生命周期都写在这里
    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 (() => {
      count.value++
      console.log('onBeforeUnmount', count.value)
    })
    onUnmounted (() => {
      count.value++
      console.log('onUnmounted', count.value)
    })
    // count++
    const countAdd = () => {
      count.value++
    }
    return {
      count,
      countAdd
    }
  }
}
</script>

初始：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov24lJde-1647775515837)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320190947050.png)]

点击加：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ki7qDxM3-1647775515838)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320191116089.png)]

eturn {
count,
countAdd
}
}
}

初始：

[外链图片转存中...(img-ov24lJde-1647775515837)]

点击加：

[外链图片转存中...(img-Ki7qDxM3-1647775515838)]

后面继续更新...

标签：count,img,value,vue3.0,特性,防盗链,外链,图片
来源： https://blog.csdn.net/qq_42584734/article/details/123619221

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。