首页 > 其他分享> 文章详细

vue3.2新特性setup汇总

2022-04-16 18:31:25 阅读：238 来源： 互联网

标签：vue TestCom setup 汇总 vue3.2 let 组件 import

vue3.2 到底更新了什么？

根据原⽂内容的更新的内容主要有以下 5 块：

1.SSR：服务端渲染优化。@vue/server-renderer包加了⼀个ES模块创建，

与Node.js解耦，使在⾮Node环境⽤@vue/serve-render做服务端渲染成为可能，

⽐如(Workers、Service Workers)

2.New SFC Features：新的单⽂件组件特性

3.Web Components：⾃定义 web 组件。这个我们平时很少⽤到，但是应该知道

4.Effect Scope API：effect 作⽤域，

⽤来直接控制响应式副作⽤的释放时间(computed 和 watchers)。

这是底层库的更新，开发不⽤关⼼，但是应该知道

5.Performance Improvements：性能提升。这是内部的提升，跟开发⽆关

setup 的简单介绍

3.0 暴露变量必须 return 出来，template中才能使⽤；这样会导致在页⾯上变量会出现很多次很不友好，vue3.2只需在script标签中添加setup，可以帮助我们解决这个问题。

.组件只需引⼊不⽤注册，属性和⽅法也不⽤返回，

也不⽤写setup函数，也不⽤写export default ，

甚⾄是⾃定义指令也可以在我们的template中⾃动获得。

变量、⽅法不需要 return 出来

<template>
<div class="home">
显⽰的值{{flag }}
<button @click="changeHander">改变值</button>
</div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
import { ref } from 'vue';
<!-- flag变量不需要在 return出去了 -->
let flag=ref("开端-第⼀次循环")
<!-- 函数也可以直接引⽤,不⽤在return中返回 -->
let changeHander=():void=>{
flag.value='开端-第⼆次循环'
}
</script>

组件不需要在注册

<!-- 这个是组件 -->
<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
    </div>
</template>
使⽤的页⾯
<template>
  <div class="home">
    <test-com></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采⽤的是⼤驼峰，引⼊后不需要在注册，是不是爽歪歪呀!
//在使⽤的使⽤直接是⼩写和横杠的⽅式连接 test-com
import TestCom from "../components/TestCom.vue"
</script>

分析引⼊ setup 后组件的变化

在 script setup 中，
引⼊的组件可以直接使⽤⽆需再通过components进⾏注册，[是不是真的很⾹啊!]
并且⽆法指定当前组件的名字，它会⾃动以⽂件名为主，也就是不⽤再写name属性了。
当我们的页⾯上需要使⽤很多组件时，它的功能⼀下就体现出来了。

新增 defineProps

刚刚我⼀直在强调,不需要使⽤setup函数，机智的⼩伙伴会说:
那么⼦组件怎么接受⽗组件传递过来的值呢?
props，emit怎么获取呢?
别担⼼,新的api出现了,我们的主⾓ defineProps

defineProps 的使⽤

⽗组件传递参数

<template>
  <div class="home">
    <test-com :info="msg" time="42分钟"></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采⽤的是⼤驼峰，引⼊后不需要在注册，是不是爽歪歪呀!
import TestCom from "../components/TestCom.vue"
let msg='公交车-第⼀次循环'
</script>

⼦组件接受参数

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>信息:{{ info}}</p>
        <p>{{ time }}</p>
    </div>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue'
defineProps({
    info:{
        type:String,
        default:'----'
    },
    time:{
        type:String,
        default:'0分钟'
    },
})
</script>

⼦组件怎么向⽗组件抛出事件？defineEmits的到来！

⼦组件使⽤

别担⼼，我们使⽤defineEmits。它可以像⽗组件抛出事件。
<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">删除</button>
    </div>
</template>
<script lang="ts" setup>
 import {defineEmits} from 'vue'
//  使⽤defineEmits创建名称，接受⼀个数组
let $myemit=defineEmits(['myAdd','myDel'])
let hander1Click=():void=>{
    $myemit('myAdd','新增的数据')
}
let hander2Click=():void=>{
    $myemit('myDel','删除的数据')
}
</script>

⽗组件

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采⽤的是⼤驼峰，引⼊后不需要在注册，是不是爽歪歪呀!
//在使⽤的使⽤直接是⼩写和横杠的⽅式连接 test-com
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess):void=>{
  console.log('新增==>',mess);
}
let myDelHander=(mess):void=>{
  console.log('删除==>', mess);
}
</script>

如何获取⼦组件中的属性值

⼦组件

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>性别:{{ sex}}</p>
        <p>其他信息:{{ info}}</p>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'喜欢李诗晴',
    age:27
})
// 将组件中的属性暴露出去，这样⽗组件可以获取
defineExpose({
    sex,
    info
})
</script>

父组件

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel='myDelHander' ref="testcomRef"></test-com>
    <button @click="getSonHander">获取⼦组件中的数据</button>
  </div>
</template>
<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
  console.log('获取⼦组件中的性别', testcomRef.value.sex );
  console.log('获取⼦组件中的其他信息', testcomRef.value.info );
}
</script>

新增指令 v-memo

v-memod会记住⼀个模板的⼦树,元素和组件上都可以使⽤。
该指令接收⼀个固定长度的数组作为依赖值进⾏[记忆⽐对]。
如果数组中的每个值都和上次渲染的时候相同，则整个⼦树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过，因为⼦树的记忆副本可以被重⽤。
因此渲染的速度会⾮常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。
<li v-for="item in listArr"  :key="item.id"  v-memo="['valueA'，'valueB']">
    {{ item.name   }}
</li>
v-memod的指令使⽤较少，它的作⽤是:缓存模板中的⼀部分数据。
只创建⼀次，以后就不会再更新了。也就是说⽤内存换取时间。

style v-bind 该同学已经从实验室毕业了

经过尤⼤⼤和团队的努⼒，<style> v-bind 已经从实验室毕业了。
我们可以使⽤这个属性了。爽歪歪！
我们可以在style中去使⽤变量。是不是感觉很⽜逼呀！
现在我们⽤起来，第⼀次使⽤<style> v-bind

style v-bind将span变成红⾊

<template>
  <span> 有开始循环了-开端 </span>  
</template>
<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    color: 'red'
  })
</script>
<style scoped>
  span {
    /* 使⽤v-bind绑定state中的变量 */
    color: v-bind('state.color');
  }  
</style>

标签：vue,TestCom,setup,汇总,vue3.2,let,组件,import
来源： https://www.cnblogs.com/ddqyc/p/16153773.html

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

ICode9