Apakah gula sintaksis? Bagaimana untuk menggunakan gula sintaks dalam Vue3.2?

Bagaimana untuk menggunakan gula sintaks dalam

Vue? Artikel berikut akan membawa anda melalui gula sintaks dan memperkenalkan cara menggunakan gula sintaks Vue3.2 Saya harap ia akan membantu anda.

1. Gambaran Keseluruhan

Sepanjang tempoh Vue2, pelbagai pembolehubah, kaedah, sifat yang dikira, dll. ditakrifkan dalam komponennya ialah Simpan mereka dalam data, methods, computed dan pilihan lain masing-masing Kod yang ditulis dengan cara ini tidak sesuai untuk rujukan kemudian untuk mencari logik perniagaan, anda perlu bertukar-tukar antara pelbagai pilihan. Fungsi vue3.0API Gabungansetup telah dilancarkan untuk menyelesaikan masalah ini. Ia menjadikan fokus logik kami lebih fokus dan sintaks lebih diperkemas Walau bagaimanapun, apabila kami menggunakan sintaks vue3.0 untuk membina komponen, kami sentiasa perlu kembalikan pembolehubah kaedah yang ditakrifkan di luar sebelum ia boleh digunakan dalam <template>, yang sedikit lebih menyusahkan Kemunculan vue3.2 gula sintaks dan beberapa API baharu memudahkan lagi kod kami. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

Apakah gula sintaksis?

Syntactic sugar (Bahasa Inggeris: Syntactic sugar) ialah istilah yang dicipta oleh saintis komputer British Peter Landing untuk merujuk kepada sintaks A tertentu ditambah yang tidak memberi kesan kepada kefungsian bahasa, tetapi lebih mudah untuk digunakan oleh pengaturcara. Gula sintaksis menjadikan program lebih ringkas dan lebih mudah dibaca.

Vue3.2Gula sintaktik

Mari kita lihat komponen fail tunggal (SFC, iaitu fail .vue) vue3.0 dan vue3.2 ) Perbandingan struktur

• vue3.0Komponen

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

• vue3.2Komponen

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

• Membandingkan templat komponen versi vue3.0 dan vue3.2, perubahan utama ialah fungsi setup tidak lagi dalam 3.2, tetapi diletakkan dalam teg skrip.

• Sifat dan kaedah yang kami tentukan tidak perlu dikembalikan sebagai balasan, ia boleh digunakan terus dalam sintaks templat. ...

  Ini adalah perubahan intuitif, mari pelajari penggunaan khusus seterusnya.

2. Pengenalan untuk menggunakan

1 > Untuk menggunakan komponen dalam , anda perlu menggunakan pilihan komponen untuk mendaftar secara eksplisit:

vue3.0 Dalam komponen fail tunggal

, komponen yang diimport boleh digunakan terus dalam templat, dan komponen akan secara automatik Daftar, dan tidak perlu menentukan nama komponen semasa Ia akan secara automatik berdasarkan nama fail, yang bermaksud tidak perlu menulis atribut nama.

<script>
import ComponentA from &#39;./ComponentA.js&#39;

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}
</script>

vue3.2<script setup>

2.Props mengisytiharkan

<script setup>
import ComponentA from &#39;./ComponentA.vue&#39;
</script>

<template>
  <ComponentA />
</template>

Dalam , boleh menggunakan pilihan

untuk mengisytiharkan

vue3.0proppropsDalam komponen,

boleh menggunakan

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

makro untuk mengisytiharkan

vue3.2propsdefineProps()Nota: Semua prop mengikut prinsip mengikat sehala , prop berubah disebabkan oleh kemas kini komponen induk, dan keadaan baharu secara semula jadi akan mengalir ke bawah ke komponen anak tanpa meneruskannya ke belakang, yang bermaksud bahawa anda tidak seharusnya menukar prop dalam komponen anak.

<script setup>
const props = defineProps([&#39;foo&#39;])
// 或者
const propsOther = defineProps({
  title: String,
  likes: Number
})

console.log(props.foo)
</script>

3. Sifat dikira

Kami biasanya menggunakan sifat terkira untuk menerangkan logik kompleks yang bergantung pada keadaan reaktif. Secara terang-terangan, nilai sifat yang dikira ini bergantung pada nilai sifat responsif yang lain Jika sifat bergantung berubah, maka nilai sifat yang dikira ini akan dikira semula.

Apabila

dipanggil,

akan dipanggil dan

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

dan

akan dikemas kini Dalam fullName.value = 'John Doe' kita boleh menggunakannya terus dalam tag setter Ia tidak perlu kembali. firstName

• 不要在计算函数中做异步请求或者更改 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. Ringkasan

Secara keseluruhannya, pengenalan sintaks gula memudahkan kod templat yang panjang apabila menggunakan Composition API, yang bermaksud kod itu lebih ringkas dan lebih tinggi. Dan pengenalan rasmi vue3.2 telah dioptimumkan dari segi kelajuan pemaparan antara muka dan penggunaan memori Artikel ini hanya meringkaskan kaedah biasa persediaan gula sintaksis Untuk lebih banyak vue3.2 ciri baharu, anda boleh menyemak dokumentasi rasmi.

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Apakah gula sintaksis? Bagaimana untuk menggunakan gula sintaks dalam Vue3.2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!