vue3之语法糖

原创已于 2023-03-08 17:46:08 修改 · 9.1k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

于 2022-06-29 18:04:56 首次发布

web前端专栏收录该内容

15 篇文章

订阅专栏

说起 Vue 3肯定不会陌生，作为时下最火的前端框架之一，很多人将它作为入门框架。

但是尽管 Vue 3很久之前就已经开始投入使用，也不免会有人抱怨 Vue 3的知识点太多太杂，更新太快。这不，最近 Vue 3又定稿了一项新技术：script-setup 语法糖。

1.什么是setup语法糖

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用

现在只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得

<template>
 <my-component :num="num" @click="addNum" />
</template>

<script setup>  import { ref } from 'vue';  import MyComponent from './MyComponent .vue';

 // 像在平常的setup中一样的写,但是不需要返回任何变量
 const num= ref(0)    //在此处定义的 num 可以直接使用
 const addNum= () => {  //函数也可以直接引用,不用在return中返回
  num.value++
 }
</script>

//必须使用驼峰命名

2.使用setup组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了

<template>
    <zi-hello></zi-hello>
</template>

<script setup>
  import ziHello from './ziHello'
</script

3.使用setup后新增API

因为没有了setup函数，那么props，emit怎么获取呢

Setup script语法糖提供了新的API来供我们使用

3.1 defineProps

用来接收父组件传来的 props。

示例:

<template>
 <div class="die">
  <h3>我是父组件</h3>
  <zi-hello :name="name"></zi-hello>
 </div>
</template>

<script setup>  import ziHello from './ziHello'    import {ref} from 'vue'  let name = ref('赵小磊========')</script>子组件代码

<template>
 <div>
  我是子组件{{name}} // 赵小磊========
 </div>
</template>

<script setup>  import {defineProps} from 'vue'

 defineProps({
  name:{
   type:String,
   default:'我是默认值'
  }
 })


// 在js中使用则需要用变量接收
let obj = defineProps({
  msg: {
    type: String,
    default: "默认值",
  },
});
onMounted(() => {
  console.log(obj.msg);
});
</script>

3.2 defineEmits

子组件向父组件事件传递。示例:

子组件

<template>
    <h2>语法糖子组件</h2>
    <h3>{{msg}}</h3>
    <button @click="tofa">向父级传参</button>
</template>
<script setup>  import {defineEmits} from 'vue'

 **//自定义函数，父组件可以触发
 const em = defineEmits(['up'])
const tofa = () => {
    em('up', '我是sugarson') // 通过up方法向父组件传递
}**

父组件

<template>
    <div>
        <h2>语法糖</h2>
       // <son-view :uname="uname" xlj="肖丽君" @up="up"></son-view>
    </div>
</template>
<script setup>  
// 需要在组件中引用子组件中的方法
import SonView from './SonView.vue'    
const up = val => {
    console.log(val) // 子组件传递过来的值
}
</script>

3.3 defineExpose

组件暴露出自己的属性，在父组件中可以拿到。

示例:

子组件

<template>
 <div>
  我是子组件
 </div>
</template>

<script setup>  
import {defineExpose,reactive,ref} from 'vue'  
let ziage=ref(18)  
let ziname=reactive({    name:'赵小磊'  })  
//暴露出去的变量  
defineExpose({    ziage,    ziname  })
</script>

父组件

<template>
    <div>
        <h2>语法糖</h2>
        <h3>{{ myName }}</h3>
        <button @click="fn">提交</button>
        <!-- <check-all-vue></check-all-vue> -->
        <son-view :uname="uname" xlj="肖丽君" @up="up" ref="sonview"></son-view>
    </div>
</template>

<script setup>  
import ziHello from './ziHello'  
import {ref} from 'vue'  
const sonview = ref() // 给组件定义一个ref名称, 查找组件sonview  通过sonview找到子组件抛出的值
onMounted(() => {
    console.log('挂载后')
    console.log('接收ref暴漏出来的值',sonview.value.ziage)
  console.log('接收reactive暴漏出来的值',sonview.value.ziname.name)
})

4.语法糖生命周期

<script setup>
import {onMounted,onUnmounted} from 'vue'
//所有的生命周期用法均为回调函数
onMounted(()=>{
  console.log('我创建了');
})
// 销毁实例变为onUnmounted，与vue2的destroy作用一致
onUnmounted(()=>{
  console.log('我销毁了');
})
</script>

5.ref获取dom节点

<script setup>
import { ref ,getCurrentInstance,nextTick} from 'vue'
import Header from './Header.vue'

const {proxy} = getCurrentInstance()
const rename = ref(null)//声明一个和ref一样的名字,直接获取它
nextTick(()=>{
  console.log(rename.value)
  //console.log(proxy.$refs.rename) 或者直接这样获取
    //要获取子组件的dom节点,通过绑定ref在子组件标签上,子组件获取自己的dom节点,通过defineExpose暴露给父组件
})
</script>

<template>
  <div ref="rename"></div>
  <Header/>
  <div></div>
</template>