Vue3怎么使用setup语法糖拒绝写return-Vue.js-PHP中文网

首页

web前端

Vue.js

Vue3怎么使用setup语法糖拒绝写return

王林

May 12, 2023 pm 06:34 PM

vue3returnsetup

Vue3.2 setup语法糖

5101c0cdbdc49998c642c71f6b6410a8 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在dcdc0fa59b5fea5bdae0d810c3919fcd使用的问题

1.5101c0cdbdc49998c642c71f6b6410a8在dcdc0fa59b5fea5bdae0d810c3919fcd使用

5101c0cdbdc49998c642c71f6b6410a8中无需return 声明的变量、函数以及import引入的内容，即可在dcdc0fa59b5fea5bdae0d810c3919fcd使用

5101c0cdbdc49998c642c71f6b6410a8语法糖

<script setup>
//import引入的内容
import { getToday } from &#39;./utils&#39;  
// 变量
const msg = &#39;Hello!&#39;
// 函数
function log() {
  console.log(msg)
}
</script>

//在template中直接使用声明的变量、函数以及import引入的内容
<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

标准组件3f1c4e4b6b16bbbd69b2ee476dc4f83a 需要写setup函数并繁琐retrun

<script>
//import引入的内容
import { getToday } from &#39;./utils&#39;  
export default{
 setup(){
    // 变量
    const msg = &#39;Hello!&#39;
    // 函数
    function log() {
      console.log(msg)
    }
    //想在tempate里面使用需要在setup内return暴露出来
    return{
       msg,
       log,
       getToday 
    }
 }
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

小结：5101c0cdbdc49998c642c71f6b6410a8语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在dcdc0fa59b5fea5bdae0d810c3919fcd使用，并且不需要写export default{}

5101c0cdbdc49998c642c71f6b6410a8语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 只在组件被首次引入的时候执行一次不同，5101c0cdbdc49998c642c71f6b6410a8 中的代码会在每次组件实例被创建的时候执行

  <script>
  console.log(&#39;script&#39;);//多次实例组件,只触发一次
  export default {
      setup() {
          console.log(&#39;setupFn&#39;);//每次实例化组件都触发和script-setup标签一样
      }
  }
  </script>

（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

2、5101c0cdbdc49998c642c71f6b6410a8引入组件将自动注册

不需要在引入组件后，通过 components:{}注册组件，可直接使用

&lt;script setup&gt;
import MyComponent from &#39;./MyComponent.vue&#39;
//components:{MyComponent}  不需要注册直接使用
&lt;/script&gt;

&lt;template&gt;
  &lt;MyComponent /&gt;
&lt;/template&gt;

3、组件通信:

在5101c0cdbdc49998c642c71f6b6410a8中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits

defineProps 和 defineEmits具备完整的类型推断并且在 5101c0cdbdc49998c642c71f6b6410a8 中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)

defineProps 代替props

接收父组件传递的数据（父组件向子组件传参）

父组件:

<template>
  <div>父组件</div>
  <Child :title="msg" />
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
const msg = ref(&#39;父的值&#39;)  //自动返回，在template直接解套使用
</script>

子组件：

dcdc0fa59b5fea5bdae0d810c3919fcd 中可以直接使用父组件传递的props （可省略props.）

d489379dc5e0cda22175a3a672bdc72b 需要通过props.xx获取父组件传递过来的props

<template>
  <div>子组件</div>
  <div>父组件传递的值：{{title}}</div>
</template>

<script setup>
//import {defineProps} from &#39;vue&#39;   不需要引入

//语法糖必须使用defineProps替代props
const  props = defineProps({
  title: {
    type: String
  }
});
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>

defineEmit 代替emit

子组件向父组件传递数据（子组件向外暴露数据）

子组件代码:

<template>
  <div>子组件</div>
  <button @click="toEmits">子组件向外暴露数据</button>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const name = ref(&#39;我是子组件&#39;)
//1、暴露内部数据
const  emits = defineEmits([&#39;childFn&#39;]);

const  toEmits = () => {
  //2、触发父组件中暴露的childFn方法并携带数据
  emits(&#39;childFn&#39;,name)
}
</script>

父组件代码:

<template>
  <div>父组件</div>
  <Child  @childFn=&#39;childFn&#39; />
  <p>接收子组件传递的数据{{childData}} </p>
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
    
const childData = ref(null)    
const childFn=(e)=>{
    consloe.log(&#39;子组件触发了父组件childFn，并传递了参数e&#39;)
    childData=e.value
}    
       
</script>

4.5101c0cdbdc49998c642c71f6b6410a8需主动向父组件暴露子组件属性：defineExpose

使用 5101c0cdbdc49998c642c71f6b6410a8 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码：

<script setup>
import { ref } from &#39;vue&#39;

const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
  a,
  b
})
</script>

父组件代码:

<template>
  <div>父组件</div>
  <Child  ref=&#39;childRef&#39; />
  <button @click=&#39;getChildData&#39;>通过ref获取子组件的属性 </button>
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
const childRef= ref()  //注册响应数据  
const getChildData =()=>{
  //子组件接收暴露出来得值
  console.log(childRef.value.a) //1
  console.log(childRef.value.b) //2  响应式数据
}    
</script>

5.语法糖其他功能

useSlots 和 useAttrs （少用，由于大部分人是SFC模式开发，在dcdc0fa59b5fea5bdae0d810c3919fcd通过38b537b6886351ac721d89624ba185ca标签就可以渲染插槽）

如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代

需要引入：import { useSlots ,useAttrs } form 'vue'

在dcdc0fa59b5fea5bdae0d810c3919fcd中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）

父组件:

<template>
  <Child msg="非porps传值子组件用attrs接收" >
    <!-- 匿名插槽 -->
    <span >默认插槽</span>
    <!-- 具名插槽 -->
    <template #title>
      <h2>具名插槽</h2>
    </template>
    <!-- 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </Child>
</template>

<script setup>
// 引入子组件
import Child from &#39;./child.vue&#39;
</script>

子组件：

<template>
  <!-- 匿名插槽 -->
  <slot />
  <!-- 具名插槽 -->
  <slot name="title" />
  <!-- 作用域插槽 -->
  <slot name="footer" :scope="state" />
  <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 -->
  <p>{{ attrs.msg == $attrs.msg }}</p>
  <!--true  没想到有啥作用... -->
  <p>{{ slots == $slots }}</p>
</template>

  
<script setup>
import { useSlots, useAttrs, reactive, toRef } from &#39;vue&#39;
const state = reactive({
  name: &#39;张三&#39;,
  age: &#39;18&#39;
})

const slots = useSlots()
console.log(slots.default()); //获取到默认插槽的虚拟dom对象
console.log(slots.title());   //获取到具名title插槽的虚拟dom对象
// console.log(slots.footer()); //报错  不知道为啥有插槽作用域的无法获取
//useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。
const attrs = useAttrs()
</script>

useSlots或许在JSX/TSX下更实用

想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx

useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容

<script lang=&#39;jsx&#39;>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
  setup() {
    // 获取插槽数据
    const slots = useSlots();
    // 渲染组件
    return () => (
      <div>
        {slots.default?slots.default():&#39;&#39;}
        {slots.title?slots.title():&#39;&#39;}
      </div>
    );
  },
});
</script>

大部分人是SFC模式开发，在dcdc0fa59b5fea5bdae0d810c3919fcd通过38b537b6886351ac721d89624ba185ca标签就可以渲染插槽，这种JSX 的写法应该是很少人会使用的

6.在setup访问路由

访问路由实例组件信息：route和router

setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推荐）

推荐：使用useRoute 函数和useRouter函数替代this.$route 和 this.$router

<script setup>
import { useRouter, useRoute } from &#39;vue-router&#39;
    const route = useRoute()
    const router = useRouter()
    
    function pushWithQuery(query) {
      router.push({
        name: &#39;search&#39;,
        query: {
          ...route.query,
        },
      })
    }
  <script/>

导航守卫

仍然可以使用路由实例组件的导航守卫

import router from &#39;./router&#39;
router.beforeEach((to,from,next)=&gt;{

})

也可以使用组合式api的导航守卫onBeforeRouteLeave, onBeforeRouteUpdate

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from &#39;vue-router&#39;

    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        &#39;Do you really want to leave? you have unsaved changes!&#39;
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteUpdate 相同，无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
 <script/>

组合式 API 守卫也可以用在任何由 `975b587bf85a482ea10b0a28848e78a4` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

以上是Vue3怎么使用setup语法糖拒绝写return的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：亿速云。如有侵权，请联系admin@php.cn删除

vue.js vs.反应：用例和应用程序Apr 29, 2025 am 12:36 AM

Vue.js适合小型到中型项目，React适合大型项目和复杂应用场景。1)Vue.js易于上手，适用于快速原型开发和小型应用。2)React在处理复杂状态管理和性能优化方面更有优势，适合大型项目。

VUE.JS与React：比较性能和效率Apr 28, 2025 am 12:12 AM

Vue.js和React各有优势：Vue.js适用于小型应用和快速开发，React适合大型应用和复杂状态管理。1.Vue.js通过响应式系统实现自动更新，适用于小型应用。2.React使用虚拟DOM和diff算法，适合大型和复杂应用。选择框架时需考虑项目需求和团队技术栈。

vue.js vs.反应：社区，生态系统和支持Apr 27, 2025 am 12:24 AM

Vue.js和React各有优势，选择应基于项目需求和团队技术栈。1.Vue.js社区友好，提供丰富学习资源，生态系统包括VueRouter等官方工具，支持由官方团队和社区提供。2.React社区偏向企业应用，生态系统强大，支持由Facebook及其社区提供，更新频繁。

React和Netflix：探索关系Apr 26, 2025 am 12:11 AM

Netflix使用React来提升用户体验。1)React的组件化特性帮助Netflix将复杂UI拆分成可管理模块。2)虚拟DOM优化了UI更新，提高了性能。3)结合Redux和GraphQL，Netflix高效管理应用状态和数据流动。

vue.js vs.后端框架：澄清区别Apr 25, 2025 am 12:05 AM

Vue.js是前端框架，后端框架用于处理服务器端逻辑。1)Vue.js专注于构建用户界面，通过组件化和响应式数据绑定简化开发。2)后端框架如Express、Django处理HTTP请求、数据库操作和业务逻辑，运行在服务器上。

vue.js和前端堆栈：了解连接Apr 24, 2025 am 12:19 AM

Vue.js与前端技术栈紧密集成，提升开发效率和用户体验。1)构建工具：与Webpack、Rollup集成，实现模块化开发。2)状态管理：与Vuex集成，管理复杂应用状态。3)路由：与VueRouter集成，实现单页面应用路由。4)CSS预处理器：支持Sass、Less，提升样式开发效率。

Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix选择React来构建其用户界面，因为React的组件化设计和虚拟DOM机制能够高效处理复杂界面和频繁更新。1）组件化设计让Netflix将界面分解成可管理的小组件，提高了开发效率和代码可维护性。2）虚拟DOM机制通过最小化DOM操作，确保了Netflix用户界面的流畅性和高性能。

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被开发者喜爱因为它易于上手且功能强大。1)其响应式数据绑定系统自动更新视图。2)组件系统提高了代码的可重用性和可维护性。3)计算属性和侦听器增强了代码的可读性和性能。4)使用VueDevtools和检查控制台错误是常见的调试技巧。5)性能优化包括使用key属性、计算属性和keep-alive组件。6)最佳实践包括清晰的组件命名、使用单文件组件和合理使用生命周期钩子。

See all articles