vue3定义数据

2022-05-02 14:03:21 阅读：208 来源： 互联网

标签：name reactive user vue3 import ref defineComponent 定义数据

<template>
<!-- vue2中必须要有一对根标签，vue3不用 -->
</template>
<script lang='ts'>
// 可以编写ts代码
// defineComponent函数，目的是可以定义一个组件，内部可以传入一个配置对象
import { defineComponent } from 'vue';
// 暴露出一个定义好的组件
export default defineComponent({
   name: '',
   setup(){//组合API中第一个要使用的函数
 } 
});
</script>
<style>
</style>

vue2--vue3数据的响应式

vue2:

<template>
<h2>{{num}}</h2>
<button @click="num++">+</button>
</template>
<script lang='ts'>
import { defineComponent,ref } from 'vue';
export default defineComponent({
    name:'setUp',
   data(){
       return{
           num:1
       }
   }
});
</script>
<style>
</style>

vue3:

<template>
<h2>{{num2}}</h2>
<button @click="num2++">+</button>
</template>
<script lang='ts'>
import { defineComponent,ref } from 'vue';
import childSetup from './setup2.vue'
export default defineComponent({
    name:'setUp',
   // vue3实现方式
   setup(){
       // ref是一个函数，定义一个响应式数据，返回一个ref属性
       // 一般定义一个基本数据类型
       const num2 = ref(8) // 一般定义基本数据类型，需要在上面import引入ref
       // num2++ 报错是因为ref返回的是一个ref对象，他的指在value字段上，但在html中直接用变量就行。不用.value
       // const num2 = 8  // 这样定义的数据不是响应式的
       return {
           num2
       }
   }
});
</script>
<style>
</style>

vue3用的ref来实现基本数据类型的响应式，而多个属性或对象，要用reactive,同样也要在import里引入reactive

<template>
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
<button @click="updata">更新</button>
</template>
<script lang='ts'>
import { defineComponent,reactive } from 'vue';
export default defineComponent({
   name: '',
   setup(){
       // 定义多个对象时，要用reactive函数
       // 定义多个对象的响应式
       // 返回的是一个proxy代理对象
       const obj = {
           name:'小亮',
           age:32
       }
       const user = reactive(obj)
       // user是代理对象，obj是实际对象
       function updata(){
           // 两种方式只有第一种才会页面数据更新，是响应式结果
           user.name = '我就是雷公'
           //obj.name='我就是雷公'
       }
       // 总结：
       // 如果操作代理对象，实际对象也会发生变化，且页面数据也会进行更新
       return {
           user,
           updata
       }
   }
});
</script>

标签：name,reactive,user,vue3,import,ref,defineComponent,定义数据
来源： https://www.cnblogs.com/alannero/p/16215664.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3定义数据