What is syntactic sugar? How to use syntax sugar in Vue3.2?

How to use syntax sugar in

Vue? The following article will take you through syntax sugar and introduce how to use Vue3.2 syntax sugar. I hope it will be helpful to you!

1. Overview

In the Vue2 period, various variables, methods, and Computed attributes, etc. are stored in data, methods, computed and other options respectively. The code written in this way is not convenient for later reference. To find a business logic, you need to Switch back and forth between options. vue3.0Combined APIsetup function was launched to solve this problem. It makes our logical focus more focused and the syntax more streamlined, but when we use ## The syntax of #vue3.0 is that when building a component, you always need to return the method variables defined outside before they can be used in d477f9ce7bf77f53fbcf36bec1b69b7a, which is a bit more troublesome. vue3. 2 The emergence of syntactic sugar and some new APIs further simplify our code. [Learning video sharing: vue video tutorial, web front-end video]

What is syntactic sugar?

Syntactic sugar (English: Syntactic sugar) is a term invented by the British computer scientist Peter Landing, which refers to the A certain syntax is added that has no impact on the functionality of the language, but is more convenient for programmers to use. Syntactic sugar makes programs more concise and more readable.

Vue3.2Syntactic sugar

Let’s take a look at

vue3.0 and ## Structural comparison of single file component (SFC, .vue file) of #vue3.2

vue3.0
• component

  <template>
      <div>
      </div>
  </template>
  <script>
  export default {
      components: {
      },
      props: {
      },
      setup () {
          return {}
      }
  }
  </script>
  <style scoped>
  </style>

vue3.2
• Component

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

Comparison
• vue3.0

  and vue3.2 version of the component template, the main change is that the setup function is no longer in 3.2, but is placed in the script tag.

The properties and methods we define do not need to be returned in return, they can be used directly in the template syntax. ...

• These are intuitive changes, let’s learn the specific usage next.

2. Introduction to use

1. Component registration When using components in

vue3.0

, you need to use the components option to register explicitly: <pre class="brush:js;toolbar:false;">&lt;script&gt; import ComponentA from &amp;#39;./ComponentA.js&amp;#39; export default { components: { ComponentA }, setup() { // ... } } &lt;/script&gt;</pre>

vue3.2

5101c0cdbdc49998c642c71f6b6410a8 In a single-file component, the imported component can be used directly in the template. The component will be automatically registered, and there is no need to specify the name of the current component. It will automatically be based on the file name, which means there is no need to write the name attribute. <pre class="brush:js;toolbar:false;">&lt;script setup&gt; import ComponentA from &amp;#39;./ComponentA.vue&amp;#39; &lt;/script&gt; &lt;template&gt; &lt;ComponentA /&gt; &lt;/template&gt;</pre>

2.Props statement In

vue3.0

, prop can be used props option to declare <pre class="brush:js;toolbar:false;">&lt;script&gt; export default { props: [&amp;#39;foo&amp;#39;], // 或者用这种方式指类型与默认值 // props: { // foo:{ // type: String, // default: &amp;#39;&amp;#39; // }, // }, setup(props) { // setup() 接收 props 作为第一个参数 console.log(props.foo) } } &lt;/script&gt;</pre>

vue3.2

In the component, props can be declared using the defineProps() macro <pre class="brush:js;toolbar:false;">&lt;script setup&gt; const props = defineProps([&amp;#39;foo&amp;#39;]) // 或者 const propsOther = defineProps({ title: String, likes: Number }) console.log(props.foo) &lt;/script&gt;</pre>

Note: All props follow the one-way binding principle. Props change due to the update of the parent component, and the new state will naturally flow downward to the child component without going in reverse. Passive, which means you should not change a prop in a child component.

3. Computed propertiesWe generally use computed properties to describe complex logic that relies on reactive state. To put it bluntly, the value of this calculated property depends on the value of other responsive properties. If the dependent properties change, then the value of this calculated property will be recalculated.

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

When

fullName.value = 'John Doe'

is called, setter will be called, and firstName and lastName will be updated. In vue3.2 we can use it directly in the d477f9ce7bf77f53fbcf36bec1b69b7a tag and no longer need to return. <blockquote><ul> <li>不要在计算函数中做异步请求或者更改 DOM！</li> <li>一个计算属性仅会在其响应式依赖更新时才重新计算，如果他依赖的是个非响应式的依赖，及时其值发生变化，计算属性也不会更新。</li> <li>相比于方法而言，计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算</li> </ul></blockquote> <h4 data-id="heading-7"><span style="font-size: 18px;"><strong>4. watch</strong></span></h4> <p>在组合式API中，我们可以使用<code>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没有区别，只不过在d477f9ce7bf77f53fbcf36bec1b69b7a模板中使用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进行解构,然后可以直接在d477f9ce7bf77f53fbcf36bec1b69b7a中使用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;">c9ccee2e6ea535a969eb3f532ad9fe89</span>中的 v-bind

c9ccee2e6ea535a969eb3f532ad9fe89中的 v-bind: 用于在 SFC c9ccee2e6ea535a969eb3f532ad9fe89 标签中启用组件状态驱动的动态 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 函数，在c9ccee2e6ea535a969eb3f532ad9fe89中的v-bind指令可以动态绑定的响应式状态。

3. Summary

Overall, the introduction of setup syntax sugar simplifies the lengthy template code when using Composition API, which makes the code more concise. , the readability is also higher. And the official introductionvue3.2 has been optimized in terms of interface rendering speed and memory usage. This article only summarizes the common methods of setup syntactic sugar. Morevue3.2New features can be viewed in the official documentation.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of What is syntactic sugar? How to use syntax sugar in Vue3.2?. For more information, please follow other related articles on the PHP Chinese website!