> 웹 프론트엔드 > View.js > 구문 설탕이란 무엇입니까? Vue3.2에서 구문 설탕을 사용하는 방법은 무엇입니까?

구문 설탕이란 무엇입니까? Vue3.2에서 구문 설탕을 사용하는 방법은 무엇입니까?

青灯夜游
풀어 주다: 2022-11-28 20:11:24
앞으로
1912명이 탐색했습니다.

Vue에서 구문 설탕을 사용하는 방법은 무엇입니까? 다음 기사에서는 구문 설탕을 안내하고 Vue3.2 구문 설탕을 사용하는 방법을 소개합니다. 도움이 되기를 바랍니다.

구문 설탕이란 무엇입니까? Vue3.2에서 구문 설탕을 사용하는 방법은 무엇입니까?

1. 개요

Vue2 시대에는 컴포넌트에서 정의한 다양한 변수, 메소드, 계산된 속성 등이 data에 저장되는데, 메서드, 계산 및 기타 옵션에서 이렇게 작성된 코드는 나중에 참조하기에 편리하지 않습니다. 다양한 옵션. 이 문제를 해결하기 위해 vue3.0 결합 API setup 함수가 출시되었습니다. 이는 우리의 논리적 초점을 더욱 집중시키고 구문을 더욱 간소화하지만 vue3.0은 구성 요소를 빌드할 때 <template>에서 사용되기 전에 항상 외부에 정의된 메서드 변수를 반환해야 한다는 점입니다. vue3.2Syntax Sugar와 일부 새로운 API의 등장으로 코드가 더욱 단순화되었습니다. [학습 동영상 공유: vue 동영상 튜토리얼Vue2时期,组件里定义的各类变量、方法、计算属性等是分别存放到datamethodscomputed等选项里,这样编写的代码不便于后期的查阅,查找一个业务逻辑需要在各个选项来回切换。vue3.0组合式APIsetup函数的推出就是为了解决这个问题,它让我们的逻辑关注点更加集中,语法也更加精简,但是当我们在使用vue3.0的语法就构建组件的时候,总是需要把外面定义的方法变量必须要return出去才能在<template>,比较麻烦一些. vue3.2语法糖的出现以及一些新增的API,让我们的代码进一步简化。【学习视频分享:vue视频教程web前端视频

什么是语法糖?

语法糖(英语:Syntactic sugar)是由英国计算机科学家彼得·兰丁发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能没有影响,但是更方便程序员使用。语法糖让程序更加简洁,有更高的可读性。

Vue3.2语法糖

来看下vue3.0vue3.2的单文件组件(SFC,即.vue 文件)的结构对比

  • vue3.0组件
<template>
    <div>
    </div>
</template>
<script>
export default {
    components: {
    },
    props: {
    },
    setup () {
        return {}
    }
}
</script>
<style scoped>
</style>
로그인 후 복사
  • vue3.2组件
<template>
    <MyTestVue :title="title" @click="changeTitle" />
</template>
<script setup>
import MyTestVue from &#39;./MyTest.vue&#39;;
import { ref } from &#39;vue&#39;;
const title = ref(&#39;测试一下&#39;)
const changeTitle = () => {
    title.value = &#39;Hello,World&#39;
}
</script>
<style scoped>
</style>
로그인 후 복사
Syntactic sugar

(영어: Syntactic sugar)는 영국의 컴퓨터 과학자 title="https://zh.m.wikipedia.org/wiki/%E5%BD%BC%E5%BE%97에 의해 개발되었습니다. %C2%B7%E5%85%B0%E4%B8%81" ref="nofollow noopener noreferrer">컴퓨터 언어의 기능에 영향을 주지 않는 컴퓨터 언어에 추가된 특정 구문을 지칭하기 위해 Peter Landin이 고안한 용어입니다. 언어이지만 프로그래머가 사용하기 더 편리합니다. 구문 설탕은 프로그램을 더욱 간결하고 읽기 쉽게 만듭니다.

Vue3.2 구문 설탕

vue3.0를 살펴보겠습니다. vue3.2의 단일 파일 구성 요소(SFC, 즉 .vue 파일)

    vue3.0 구성 요소

    vue3.0中使用组件,需要使用 components 选项来显式注册:

    <script>
    import ComponentA from &#39;./ComponentA.js&#39;
    
    export default {
      components: {
        ComponentA
      },
      setup() {
        // ...
      }
    }
    </script>
    로그인 후 복사

    vue3.2 <script setup> 的单文件组件中,导入的组件可以直接在模板中使用,组件会自动注册,并且无需指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。

    <script setup>
    import ComponentA from &#39;./ComponentA.vue&#39;
    </script>
    
    <template>
      <ComponentA />
    </template>
    로그인 후 복사

    2.Props 声明

    vue3.0中,prop可以使用props选项来声明

    <script>
    export default {
      props: [&#39;foo&#39;],
      // 或者用这种方式指类型与默认值
      // props: {
      //   foo:{
      //     type: String,
      //     default: &#39;&#39;
      //   },
      // },
      setup(props) {
        // setup() 接收 props 作为第一个参数
        console.log(props.foo)
      }
    }
    </script>
    로그인 후 복사

    vue3.2组件中,props可以使用defineProps()宏来声明

    <script setup>
    const props = defineProps([&#39;foo&#39;])
    // 或者
    const propsOther = defineProps({
      title: String,
      likes: Number
    })
    
    console.log(props.foo)
    </script>
    로그인 후 복사

    注意事项:所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递,这意味着你不应该在子组件中去更改一个 prop。

    3.计算属性

    我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。说白了就是这个计算属性的值依赖于其他响应式属性的值,依赖的属性发生变化,那么这个计算属性的值就会进行重新计算。

    <script setup>
    import { ref, computed } from &#39;vue&#39;
    
    const firstName = ref(&#39;John&#39;)
    const lastName = ref(&#39;Doe&#39;)
    
    const fullName = computed({
      // getter
      get() {
        return firstName.value + &#39; &#39; + lastName.value
      },
      // setter
      set(newValue) {
        // 注意:我们这里使用的是解构赋值语法
        [firstName.value, lastName.value] = newValue.split(&#39; &#39;)
      }
    })
    </script>
    로그인 후 복사

    当调用fullName.value = &#39;John Doe&#39;时,setter会被调用,而firstNamelastName会被更新,在vue3.2中我们可以直接在<template>

    <script setup>
    import { ref,watch } from &#39;vue&#39;;
    
    const props = defineProps({
        title: String,
        itemList: {
            type: Array,
            default: () => [{
                text: &#39;title&#39;,
                value: 0
            }]
        }
    })
    
    watch(() => props.itemList.length,(newValue,oldValue) => {
        console.log(&#39;newValue===&#39;,newValue);
        console.log(&#39;oldValue===&#39;,oldValue);
    })
    </script>
    로그인 후 복사
    로그인 후 복사
    관련 라벨:
    원천:juejin.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿