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

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

1. 개요

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

什么是语法糖？

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

Vue3.2语法糖

来看下vue3.0与vue3.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>

• 对比vue3.0 与vue3.2版本的组件模板，最主要的变化是3.2中没有了setup, 웹 프런트엔드 동영상

  ]

구문 설탕이란 무엇입니까?

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 = 'John Doe'时，setter会被调用，而firstName 和 lastName会被更新，在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>

vue3의 구조 비교 .2< /code>Component🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script setup&gt; import { ref,watch } from &amp;#39;vue&amp;#39;; ... watch(() =&gt; props.itemList,(newValue,oldValue) =&gt; { console.log(&amp;#39;newValue===&amp;#39;,newValue); console.log(&amp;#39;oldValue===&amp;#39;,oldValue); }) &lt;/script&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><ul style="list-style-type: disc;">🎜🎜<code>vue3.0 및 vue3.2<의 구성 요소 템플릿을 비교하세요. /code> 버전의 경우 주요 변경 사항은 3.2에는 <code>setup 기능이 없지만 스크립트 태그에 배치된다는 것입니다. 🎜🎜🎜🎜우리가 정의한 속성과 메서드는 반환될 필요가 없으며 템플릿 구문에서 직접 사용할 수 있습니다. ...🎜🎜이것은 직관적인 변경 사항이므로 구체적인 사용법을 알아보겠습니다. 🎜🎜🎜🎜🎜 2. 사용 소개 🎜🎜🎜🎜🎜 1. 컴포넌트 등록 🎜🎜🎜🎜vue3.0 컴포넌트를 사용할 때 컴포넌트 옵션을 사용하여 명시적으로 등록해야 합니다: 🎜

<script setup>
import { ref,watch } from &#39;vue&#39;;
...
watch(() => props.itemList,(newValue,oldValue) => {
    console.log(&#39;newValue===&#39;,newValue);
    console.log(&#39;oldValue===&#39;,oldValue);
},{deep:true})
</script>

🎜vue3.2 <script setup>의 단일 파일 구성 요소에서는 가져온 구성 요소를 템플릿에 직접 사용할 수 있으며 해당 구성 요소는 자동으로 등록됩니다. 현재 구성요소의 이름을 지정할 필요가 없습니다. 즉, 이름 속성을 작성할 필요가 없습니다. 🎜

<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,props.title],(newValue,oldValue) => {
    console.log(&#39;newValue===&#39;,newValue);
    console.log(&#39;oldValue===&#39;,oldValue);
},{deep:true})
  
</script>

🎜🎜2.Props 문 🎜🎜🎜🎜vue3.0에서 prop는 props를 사용할 수 있습니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script setup&gt; ... watchEffect(() =&gt; { console.log(&amp;#39;itemList===&amp;#39;,props.itemList.length); console.log(&amp;#39;title===&amp;#39;,props.title); }) &lt;/script&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜를 선언하는 옵션 vue3.2 구성 요소에서 props는 defineProps() 매크로를 사용하여 🎜

<script setup>
  ...
const stopEffect = watchEffect(() => {
    console.log(&#39;itemList===&#39;,props.itemList.length);
    console.log(&#39;title===&#39;,props.title);
})
stopEffect()
</script>

를 선언할 수 있습니다. < blockquote>🎜참고: 모든 props는 단방향 바인딩 원칙을 따릅니다. props는 상위 구성 요소의 업데이트로 인해 변경되며, 새로운 상태는 반대 방향으로 전달되지 않고 자연스럽게 하위 구성 요소로 흘러갑니다. 그렇지 않습니다. 하위 구성 요소에서 소품을 변경해야 합니다. 🎜

🎜🎜3. 계산된 속성🎜🎜🎜🎜우리는 일반적으로 반응 상태에 의존하는 복잡한 논리를 설명하기 위해 계산된 속성을 사용합니다. 간단히 말하면, 이 계산된 속성의 값은 다른 반응형 속성의 값에 따라 달라집니다. 종속 속성이 변경되면 이 계산된 속성의 값이 다시 계산됩니다. 🎜

子组件
<script>
export default {
  emits: [&#39;inFocus&#39;, &#39;submit&#39;],
  setup(props, ctx) {
    ctx.emit(&#39;submit&#39;,params)
  }
}
// 或者将可以将emit解构使用
export default {
    setup(props,{emit}) {
    emit(&#39;submit&#39;,params)
  }
}
</script>
父组件
<template>
    <Children @submit="submitHandel"/>
  </div>
</template>

<script>
export default {
  name: &#39;TodoItem&#39;,
  setup(props, { emit }) {
    const submitHandel = () => {
      console.log(&#39;子组件调用了父组件的submitHandel方法&#39;);
    }
    return {
      submitHandel,
    }
  }
};
</script>

🎜fullName.value = 'John Doe'를 호출하면 setter가 호출되고 firstName 및 lastName</code > code>가 업데이트됩니다. <code>vue3.2에서는 <template> 태그에서 직접 사용할 수 있으며 더 이상 반환할 필요가 없습니다. 🎜

• 不要在计算函数中做异步请求或者更改 DOM！
• 一个计算属性仅会在其响应式依赖更新时才重新计算，如果他依赖的是个非响应式的依赖，及时其值发生变化，计算属性也不会更新。
• 相比于方法而言，计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算

4. watch

在组合式API中，我们可以使用watch函数在每次响应式状态发生变化时触发回调函数,watch的第一个参数可以是不同形式的“数据源”：它可以是一个 ref(包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：watch()是懒执行的：仅当数据源变化时，才会执行回调，例如：

<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>

这里监听props.itemList.length，当传入的itemList数量发生变化时，后面的回调方法会被调用。当然wacth()还有第三个可选参数：否开启深监听(deep), 如果这里这样写:

<script setup>
import { ref,watch } from &#39;vue&#39;;
...
watch(() => props.itemList,(newValue,oldValue) => {
    console.log(&#39;newValue===&#39;,newValue);
    console.log(&#39;oldValue===&#39;,oldValue);
})
</script>

当传入的itemList数量发生改变时，回调函数不会触发，正确的写法是加上其第三个参数deep:true

<script setup>
import { ref,watch } from &#39;vue&#39;;
...
watch(() => props.itemList,(newValue,oldValue) => {
    console.log(&#39;newValue===&#39;,newValue);
    console.log(&#39;oldValue===&#39;,oldValue);
},{deep:true})
</script>

watch也可以同时监听多个属性：

<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,props.title],(newValue,oldValue) => {
    console.log(&#39;newValue===&#39;,newValue);
    console.log(&#39;oldValue===&#39;,oldValue);
},{deep:true})
  
</script>

5. watchEffect()

与watch()的懒执行不同的是，watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue会自动追踪副作用的依赖关系，自动分析出响应源。上面的例子可以重写为：

<script setup>
  ...
watchEffect(() => {
    console.log(&#39;itemList===&#39;,props.itemList.length);
    console.log(&#39;title===&#39;,props.title);
})
</script>

这个例子中，回调会立即执行。在执行期间，它会自动追踪props.itemList.length作为依赖（和计算属性的行为类似）。每当传入的itemList.length变化时，回调会再次执行。

如果要清除watchEffect()的的监听，只需要显示的调用watchEffect()的返回函数就可以了，例如：

<script setup>
  ...
const stopEffect = watchEffect(() => {
    console.log(&#39;itemList===&#39;,props.itemList.length);
    console.log(&#39;title===&#39;,props.title);
})
stopEffect()
</script>

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。我们能更加精确地控制回调函数的触发时机。 watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。

6.组件的事件调用

6.1 子组件调用父组件的方法

vue3.0中如果我们的子组件触发父组件的方法，我们的做法:

子组件
<script>
export default {
  emits: [&#39;inFocus&#39;, &#39;submit&#39;],
  setup(props, ctx) {
    ctx.emit(&#39;submit&#39;,params)
  }
}
// 或者将可以将emit解构使用
export default {
    setup(props,{emit}) {
    emit(&#39;submit&#39;,params)
  }
}
</script>
父组件
<template>
    <Children @submit="submitHandel"/>
  </div>
</template>

<script>
export default {
  name: &#39;TodoItem&#39;,
  setup(props, { emit }) {
    const submitHandel = () => {
      console.log(&#39;子组件调用了父组件的submitHandel方法&#39;);
    }
    return {
      submitHandel,
    }
  }
};
</script>

vue3.2语法糖中,子组件要触发的事件需要显式地通过 defineEmits() 宏来声明

子组件
<script setup>
const emit = defineEmits([&#39;inFocus&#39;, &#39;submit&#39;])

function buttonClick(parmas) {
  emit(&#39;submit&#39;, parmas)
}
</script>
父组件
<template>
    <Children @submit="submitHandel"/>
  </div>
</template>

<script setup>
  const submitHandel = () => {
    console.log(&#39;子组件调用了父组件的submitHandel方法&#39;);
  }
};
</script>

6.2 父组件调用子组件的方法或是属性

vue3.0中如果父组件触发子组件的方法或是属性，直接在return函数中返回就可以，数据都是默认隐式暴露给父组件的。

<script>
// 子组件
setup(props, { emit }) {
  const isShow = ref(false)
  // 父组件调用这个方法
  const showSubComponent = () => {
    isShow.value = !isShow.value
  }
  return {
      // return 返回
      showSubComponent,
    }
  }
</script>

父组件中通过ref获取到子组件，并对子组件暴露的方法进行访问

父组件
<template>
  <div class="todo-list">
    <TodoItemVue :itemList="itemList" @clickItemHandel="clickItemHandel" ref="todoItemVueRef" />
  </div>
</template>
<script>
  import { ref } from &#39;vue&#39;;
  export default {
  setup(props, { emit }) {
    //获取子组件ref
    const todoItemVueRef = ref(null)
    // 调用子组件的方法
    const callItemFuncHandel = () => {
        todoItemVueRef.value.showSubComponent()
    }
    return {
     todoItemVueRef
    }
  }
};
</script>

vue3.2语法中，父组件的调用方式相同，子组件通过defineExpose()将方法或是属性暴露出去

子组件
<script setup>
const isShow = ref(false)
// 父组件调用这个方法
const showSubComponent = () => {
    isShow.value = !isShow.value
}
// 通过defineExpose将方法暴露出去
defineExpose({
    showSubComponent
})
</script> 
父组件
<template>
  <div class="todo-list">
    <TodoItemVue :itemList="itemList" @clickItemHandel="clickItemHandel" ref="todoItemVueRef" />
  </div>
</template>
<script setup>
  import { ref } from &#39;vue&#39;;
  //获取子组件ref
  const todoItemVueRef = ref(null)
  // 调用子组件的方法
  const callItemFuncHandel = () => {
      todoItemVueRef.value.showSubComponent()
  }
</script>

7.Vuex的使用

在vue3.0与vue3.2中创建Vuex没有区别，只不过在<template>模板中使用Vuex的store有细微差别。

import { createStore } from 'vuex';
import { ADD_ITEM_LIST, REDUCE_ITEM_LIST, CHANGE_ITEM_LIST_ASYNC } from './constants';

export default createStore({
  state: {
    itemList: [
      { text: 'Learn JavaScript', done: true },
      { text: 'Learn Vue', done: false },
      { text: 'Build something awesome', done: false },
    ],
  },
  getters: {
    doneItemList: (state) => state.itemList.filter((todo) => todo.done),
  },
  mutations: {
    // 使用ES2015风格的计算属性命名功能 来使用一个常量作为函数名
    [ADD_ITEM_LIST](state, item) {
      console.log('增加数据', item);
      state.itemList.push(item);
    },
    [REDUCE_ITEM_LIST](state) {
      console.log('减少数据');
      state.itemList.pop();
    },
  },
  actions: {
    [CHANGE_ITEM_LIST_ASYNC]({ commit, state }, todoItem) {
      /// 模拟网络请求
      setTimeout(() => {
        commit(ADD_ITEM_LIST, todoItem);
        console.log('state===', state);
      }, 1000);
    },
  },
  modules: {
  },
});

在vue3.0中我们一般在return中对store.state进行解构,然后可以直接在<template>中使用state中的值

<template>
  <div class="todo-item">
    <ol>
      <li v-for="(item,index) in itemList" :key="index" class="todos" @click="clickItem(index)">
        {{ item.text }}
      </li>
    </ol>
  </div>
</template>
<script>
  export default {
  name: &#39;TodoItem&#39;,
  setup(props, { emit }) {
    return {
      // 对store.state进行解构
      ...store.state,
      clickItem,
      count,
      isShow,
      showSubComponent,
    }
  }
};
</script>

vue3.2中没有了return，需要我们显示的获取要使用的stare的值

<template>
  <div class="todo-item">
    <ol>
      <li v-for="(item,index) in itemList" :key="index" class="todos" @click="clickItem(index)">
        {{ item.text }}
      </li>
    </ol>
  </div>
</template>
<script setup>
import { useStore } from &#39;vuex&#39;;
const store = useStore()
// 获取后在<template>中使用
const itemList = store.state.itemList
</script>

8. <span style="font-size: 18px;"><style></span>中的 v-bind

<style>中的 v-bind: 用于在 SFC <style> 标签中启用组件状态驱动的动态 CSS 值

<script setup>
import { ref, watchEffect } from &#39;vue&#39;;
const color = ref(&#39;black&#39;)
const callChangeColorHandel = () => {
  if(color.value === &#39;black&#39;) {
    color.value = &#39;red&#39;
  }else {
    color.value = &#39;black&#39;
  }
}
</script>
<style lang="scss" scoped>
.todo-list {
  color: v-bind(color);
}
</style>

触发callChangeColorHandel 函数，在<style>中的v-bind指令可以动态绑定的响应式状态。

3. 요약

전반적으로 설정 구문 설탕의 도입으로 새로운 기능의 사용이 단순화되었습니다. 공식 문서를 확인할 수 있습니다. Composition API时冗长的模板代码，也就是让代码更加简洁，可读性也更高。并且官方介绍vue3.2在界面渲染的速度以及内存的使用量上都进行了优化，本文只是对setup语法糖的常用方式进行了总结，更多vue3.2

(학습 영상 공유:

웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 구문 설탕이란 무엇입니까? Vue3.2에서 구문 설탕을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!