vue3语法

## vue3语法使用和api

### setup ref reactive

setup在beforeCreate，created前，现在用它来取代这两个生命周期函数。

用ref和reactive包裹的数据是具有响应式的。ref一般包裹的简单数据类型，reactive一般包裹的是复杂数据类型。

<template>

  <div class="home">{{name1}}-----{{name2}}</div>

</template>

<script setup>

import {ref,reactive,onMounted}from 'vue'

let name1='哈哈哈'//不具有响应式

let name2=ref('wow')//具有响应式

onMounted(()=>{//进页面就执行的

    console.log('hahahhaha');

    name2.value='呵呵呵'

})

</script>

### computed

在v3中，把computed变成了组合式API，使用时需要引入.

和vue2中一样，计算属性根据你依赖的数据变更，如果依赖的数据没有变更，则不会重新计算。通常，我们并不建议去修改计算属性计算出来的值（fullName）.

<template>

 <p>名字是：{{fullname}}</p>

</template>

<script setup>

import {computed} from 'vue'

let names=reactive({

    a:'阿',

    b:'未'

})

let fullname=computed(()=>{

    return names.a + names.b

})

</script>

### watch

监听单个响应式数据时，当num发生变化的时候，会执行watch中的函数

<template>

 <p>{{num}}</p><button @click="add()">add</button>

</template>

<script setup>

import {ref} from 'vue'

let num =ref('0')

watch(num,(newValue,oldValue)=>{

    console.log(`'当前数字增加了'，${newValue},${oldValue}`);

})

function add(){

    num.value++

}

</script>

监听reactive：

<template>

 <p>名字是：{{fullname}}</p><button @click="change()">change</button>

</template>

<script setup>

import {reactive} from 'vue'

let names=reactive({

    a:'阿',

    b:'未'

})

watch(names.a,(newValue,oldValue)=>{

    console.log(`'当前'，${newValue},${oldValue}`);

})

function change(){

    names.a='话'

}

</script>

监听多个属性：

watch([()=>names.a,()=>names.b],(newValue,oldValue)=>{

  console.log('names改变了',newValue,oldValue)

})

深度监听：

<script setup>

let names=reactive({

      familyName: '鳌',

      age:23,

      job:{

        salary:10

      }

    })

//第一种

watch(()=> names.job.salary,(newValue,oldValue)=>{

  console.log('names改变了',newValue,oldValue)

})

//第二种

watch(()=> names.job,(newValue,oldValue)=>{

  console.log('names改变了',newValue,oldValue)

},{deep:true})

</script>

### 通过ref获取并操作dom元素

<template>

<input  ref="uploadFile" />

</template>

<script setup>

const uploadFile = ref(null);

//而后在页面已经渲染之后：

 console.log('---', uploadFile.value);

uploadFile.value.click();

</script>