vue3.0 新增和更改的一些新的api和功能

前言

---

vue3.0新增更改了很多api,我在使用过程中慢慢总结下来，记录一下，方便自己学习。
这篇博文会不断更新的

一，支持在<style>标签中使用v-bind动态获取组件中的值

---

之前再vue2.0中想要动态操作某个dom的样式，就需要用到ref或者使用js原生手段，自从3.0更新后，就不需要了，新增了<style>标签支持使用v-bind获取组件中的值。用一个例子来详细讲一下。

新增的这个功能，,直接把动态的样式绑定在标签上.,可以很方便的动态操作某个样式

<template>
<div :class='"testStyleAddVars"'>个人中心页面</div>
<van-button type="danger" @click="testInterface">测试改变某个变量关联style中的css</van-button>

</template>
<script setup lang="ts">
import { reactive,ref } from 'vue';
let styleObject = reactive({
	Scolor:'green'
})
const testInterface = (()=>{
    styleObject.Scolor = "red"
})
</script>
可以共存
<style lang="scss" scoped></style>
<!-- 单文件组件中的style标签支持使用`v-bind`价将css的值连接到动态的组件状态 -->
<style scoped>
/* 这种做法，可以灵活的再页面中改变css样式 */
.testStyleAddVars{
	color: v-bind("styleObject.Scolor");
}
</style>

二，v-for 支持循环渲染object

<template>
<!-- vue3.0  v-for不仅仅可以渲染数组，还可以渲染对象 -->
<!-- 渲染对象时，第一个变量就是key,第二个变量就是value,第三个变量则是下标 -->
<!-- 要强制重新排序元素就需要设置 :key="item" -->
<div v-for="(item,sed,index) in vForObject" :key="item">
    <p>{{ index }}</p>
    <span>{{ sed }}</span>:<span>{{ item }}</span>
</div>
</template>
<script setup lang="ts">
import { reactive,ref } from 'vue';
const vForObject:object = {
    name:'李四',
    age:12,
    weight:125,
}
</script>
<style lang="scss" scoped></style>

三，vue3.0响应式原理的变化以及和2.0的区别

详情请移步vue2.0和3.0的响应式原理以及区别