Vue3核心语法速成

一、细微变化
由vue2的选项式变成了组合式,但是vue3可以写vue2的写法
并且vue3不必要只有一个根组件了

可以这样定义组合式

export default {name: 'App',components: {HelloWorld}setup(){}
}

也可以这样定义（一般推荐这种），这个setup属性是专为组合式API提供的语法糖

<script setup>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}}

二、相关语法

1、reactive和shallowReactive（主要处理对象类型）

shallowReactive和Reactive都是vue.js中的响应式AP!。Reactive用于将对象转换为响应式对象，使其具有自动追踪依赖项和触发更新的能力。而shallowReactive只会让对象的第一层属性具有响应式能力，而不会递归地将嵌套属性转换为响应式对象。这意味着如果对象具有嵌套属性，shallowReactive只会在第一层级别上自动追踪更改，而不会递归地监视内部更改。

reactive能改变age和friends里的二级数据

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import { reactive } from 'vue';const myData=new reactive({name:'张三',age:18,friends:['韩梅梅','李雷']})function clickHandler() { myData.friends.push('小明')myData.age++}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

shallowReactive只能改变age不能改变friends中的数据

此时不能改变friends中的数据

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import {shallowReactive } from 'vue';const myData= shallowReactive({name:'张三',age:18,friends:['韩梅梅','李雷']})function clickHandler() { myData.friends.push('小明')
}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

此时可以改变age的数值

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import {shallowReactive } from 'vue';const myData= shallowReactive({name:'张三',age:18,friends:['韩梅梅','李雷']})function clickHandler() { myData.age++
}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

2、ref（主要处理基本数据类型，也能处理对象类型）

<template><div class="hello"><h1>{{ count }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import {ref } from 'vue';const count=ref(0)function clickHandler(){count.value++
}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

3、readonly和shallowReadonly（非响应式数据）

readonly根属性和内部属性都是只读的

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import {readonly } from 'vue';const myData=readonly({name:'张三',age:18,friends:['韩梅梅','李雷']})function clickHandler() { myData.age++}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

shallowReadonly根属性是只读的内部属性是不读的

访问friends里的数据是没有反应的

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import { shallowReadonly } from 'vue';const myData=shallowReadonly({name:'张三',age:18,friends:['韩梅梅','李雷']})function clickHandler() { myData.friends.push('王五')}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

4、computed

以下例子中渲染三次，但是有缓存，就是只执行了一次

<template><div class="hello"><h1>{{ getLen }}</h1><h1>{{ getLen }}</h1><h1>{{ getLen }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import { computed, ref } from 'vue';const content=ref('这是一段测试内容')
const getLen=computed(()=>{console.log('计算属性执行了')return content.value.length
})
function clickHandler() { content.value+='!'}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

5、watch(监听)

watch是一个选项 API，通常在组件的选项中使用。需要显式地指定要监听的数据和回调函数。

可以用来监听ref对象、reactive对象、函数、数组

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import { reactive, watch} from 'vue';const myData=reactive({name:'张三',age:18,friends:['韩梅梅','李雷']})watch(()=>myData.age,(newVal,oldVal)=>{console.log(newVal,oldVal)})function clickHandler() { myData.age++}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

6、watchEffect

watchEffect是一个函数 API，在组件的 setup 函数或生命周期函数中使用。不需要显式地指定要监听的数据，它会自动追踪函数内部使用的响应式数据。

<template><div class="hello"><h1>{{ myData }}</h1><button @click="clickHandler">修改</button></div>
</template><script setup>
import { reactive,ref, watchEffect} from 'vue';const count=ref(0)
const myData=reactive({name:'张三',age:18,friends:['韩梅梅','李雷']})watchEffect(()=>{console.log('count的值为:'+count.value+',age的值为:'+myData.age)})function clickHandler() { myData.age++}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0r;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>