b52f528b402d46a6a5bc4d0a53e05059_tplv-k3u1fbpfcp-zoom-crop-mark_1304_1304_1304_734.webp

1. 认识Vue3

了解相关信息

Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本
耗时2年多，4000+次提交，40+RFC，2500+PR，99+贡献者。
Vue3支持vue2的大多数特性
更好的支持Typescript

性能提升

打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
使用Proxy代替defineProperty实现数据响应式**
重写虚拟DOM的实现和Tree-Shaking

2. Composition API(常用部分)

setup

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

ref

作用: 定义一个数据的响应式
语法: const xxx = ref(initValue):
创建一个包含响应式数据的引用(reference)对象
js中操作数据: xxx.value
模板中操作数据: 不需要.value
一般用来定义一个基本类型的响应式数据

<template>
 <h2>{{count}}</h2>
 <hr>
 <button @click="update">更新</button>
</template>

<script>
import { ref } from 'vue'
export default {

/* 使用vue3的composition API */
 setup () {

   // 定义响应式数据 ref对象
   const count = ref(1)
   console.log(count)

   // 更新响应式数据的函数
   function update () {
     // alert('update')
     count.value += 1
   }

   return {
     count,
     update
     }
   }
}
</script>

reactive

作用: 定义多个数据的响应式,对象或者数组
const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

<template>
   <h2>name: {{state.name}}</h2>
   <h2>age: {{state.age}}</h2>
   <h2>wife: {{state.wife}}</h2>
   <hr>
   <button @click="update">更新</button>
</template>

<script>
/* 
reactive: 
 作用: 定义多个数据的响应式
 const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import { reactive } from 'vue'
export default {
   setup () {
     /* 
     定义响应式数据对象
     */
     const state = reactive({
       name: 'tom',
       age: 25,
       wife: {
         name: 'marry',
         age: 22
       },
     })
     console.log(state, state.wife)

     const update = () => {
       state.name += '--'
       state.age += 1
       state.wife.name += '++'
       state.wife.age += 2
     }

     return {
       state,
       update,
     }
   }
}
</script>

父子组件传值

首先写一个父组件

<template>
    <div>
        我是父组件
        <Child :msg='msg' @changeFatherMsg="changeMsg" ></Child>
    </div>
</template>
<script>
import Child from './Child.vue'
import {ref,toRefs} from 'vue' 
export default {
//引入组件需要用components
 components: {
    Child
  },
    setup(){
        let msg=ref('我是父组件传来的消息')
        const changeMsg=(val)=>{
            msg.value=val
        }
        return{
            msg,
            changeMsg
        }
    }
}
</script>

再写一个子组件

<template>
    <div>
        我是子组件
        {{msg}}
        <button @click="$emit('changeFatherMsg',childMsg)">修改父组件的值</button>
    </div>
</template>
<script>
import {ref,toRefs} from 'vue' 
export default {
    props:{
        msg:{
            type:String,
            default:''
        }
    },
    setup(props){
        const {msg}= toRefs(props)
        console.log(props)
        let childMsg=ref('我是来自子组件的消息')
        return{
            msg,
            childMsg
        }
    }
}
</script>

3.我们知道vue3.0下面我们就来了解一下vue3.0和3.2版本的区别

首先我们要想用vue3.2版本的话需要在vue3.0的基础上升到3.2

需要用到npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2或者yarn add vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

升级完后的版本

QQ图片20220410165756.png

vue3.2 正式语法 script setup ＜script setup＞

与vue3.0不同的是这里没有return可直接使用你定义的数据或者事件

组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。示例:

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>

使用 props

通过defineProps指定当前 props 类型，获得上下文的props对象。示例：

<script setup>
    import { defineProps } from 'vue'
    const props = defineProps(
        { title: String, }
    ) 
</script>

使用 emits

使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。示例：

<script setup>
  import { defineEmits } from 'vue'
  const emit = defineEmits(['change', 'delete'])
</script>

写在最后

写作不易，希望可以获得你的一个「赞」。如果文章对你有用，可以选择「收藏」。如有文章有错误或建议，欢迎评论指正，谢谢你。❤️

vue3的使用，vue3.0和3.2的区别