[JavaScript知识库]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无变化可操作