Vue3---下载与新增功能

Vue3有两种环境集成方式

vite集成 npm init vite 项目名

Vue集成vue create 项目名

Vue3---setup()函数/环境

 在setup函数中可以直接var a声明变量也可以写函数 统一用return导出然后全局就能使用return的数据

 setup函数中change的局部变量不能使return出去的data发生变化

 可以直接写<script setup></script>在里面写setup 不用return外面直接能使用

export default {

     setup(){
     let a=123
     return {a}
}
}

<script setup>
   let a=123

<script>

都需要import引入属性功能  无论watch还是生命周期函数

<script setup>
import {watch,onMounted,onBeforeMount} from "vue"
watch(监听属性,(newvalue,oldvalue)=>{
    
   
})
<script>

Vue3.0生命周期

 在setup环境中

 onBeforeMount  onMounted--挂载

 onBeforeUpdate  onUpdated--更新

 onBeforeUnmount  onUnmounted--销毁

ref和reactive

在script标签的setup环境中

声明的变量属性不是响应式数据

需要引入ref和reactive让数据变成响应式

import {ref,reactive} from "vue"

let a=ref("变量1")

let obj=reactive({

 })

reactive 用来声明对象

defineProps父传子

引入 import {defineProps} from "vue"

父组件传入 <div :msg="msg" :count="count"></div>

子组件接收  let obj=defineProps(['msg','count'])

使用  {{obj.msg}}

父:
<Box :msg="msg" :count="count"></Box>




Box子:
import {defineProps} from "vue"
let obj=defineProps(['msg','count'])
{{obj.msg}}

defineEmits子传父

 import {defineEmits} from "vue"

使用 let emit=defineEmits()

emit("myemit",100,200)  自定义函数

父组件:

<Box :myemit="fn"> </Box>

class bind 样式变量

 直接给style的class属性使用变量

let c=blue

 .box{

   color:bind(c)

 }

 这样就可以通过操作变量操作样式

v-model

父组件给Box组件传值 <Box v-model:msg="msg"></Box> 这样就传了一个名为msg的值

 子组件接收值  使用Defineprops   obj=defineProps(["msg"])   {{obj.msg}}

teleport

<teleport to="body"></teleport>

teleport 内的标签内容会成为 to="body" to中的标签的子元素

isRef toRef

使一个ref值可读但不能被操作

let count=ref(0)

let res=redonly(count)

复制了一个一样的count但是不能被操作 原来的count无变化可操作

readonly

使一个ref值可读但不能被操作

 let count=ref(0)

 let res=redonly(count)

 复制了一个一样的count但是不能被操作 原来的count无变化可操作