189 8069 5689
今天小编给大家分享一下Vue3.2中如何使用语法糖的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
为济南等地区用户提供了全套网页设计制作服务，及济南网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、济南网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
在Vue2时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed等选项里，这样编写的代码不便于后期的查阅，查找一个业务逻辑需要在各个选项来回切换。vue3.0组合式APIsetup函数的推出就是为了解决这个问题，它让我们的逻辑关注点更加集中，语法也更加精简，但是当我们在使用vue3.0的语法就构建组件的时候，总是需要把外面定义的方法变量必须要return出去才能在，比较麻烦一些. vue3.2语法糖的出现以及一些新增的API，让我们的代码进一步简化。
语法糖（英语：Syntactic sugar）是由英国计算机科学家彼得·兰丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。
Vue3.2语法糖来看下vue3.0与vue3.2的单文件组件（SFC，即.vue 文件）的结构对比
vue3.0组件
vue3.2组件
对比vue3.0 与vue3.2版本的组件模板，最主要的变化是3.2中没有了setup函数，而是把它放在了script标签中。
我们定义的属性和方法也不用在return中返回，直接就可以用在模板语法中 ...
这些是直观的变化，接下来我们学习具体的用法。
vue3.0中使用组件，需要使用 components 选项来显式注册：
在 注意事项：所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递，这意味着你不应该在子组件中去更改一个 prop。 我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。说白了就是这个计算属性的值依赖于其他响应式属性的值，依赖的属性发生变化，那么这个计算属性的值就会进行重新计算。 当调用 不要在计算函数中做异步请求或者更改 DOM！ 一个计算属性仅会在其响应式依赖更新时才重新计算，如果他依赖的是个非响应式的依赖，及时其值发生变化，计算属性也不会更新。 相比于方法而言，计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算 在组合式API中，我们可以使用 这里监听 当传入的 与 这个例子中，回调会立即执行。在执行期间，它会自动追踪 如果要清除 watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。vue3.2
2.Props 声明
vue3.0中，prop可以使用props选项来声明vue3.2组件中，props可以使用defineProps()宏来声明3.计算属性
fullName.value = 'John Doe'时，setter会被调用，而firstName 和lastName会被更新，在vue3.2中我们可以直接在标签中使用它，不在需要return返回。4. watch
watch函数在每次响应式状态发生变化时触发回调函数,watch的第一个参数可以是不同形式的“数据源”：它可以是一个 ref(包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：watch()是懒执行的：仅当数据源变化时，才会执行回调，例如：props.itemList.length，当传入的itemList数量发生变化时，后面的回调方法会被调用。当然wacth()还有第三个可选参数：否开启深监听(deep), 如果这里这样写:itemList数量发生改变时，回调函数不会触发，正确的写法是加上其第三个参数deep:truewatch也可以同时监听多个属性：5.
watchEffect()watch()的懒执行不同的是，watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue会自动追踪副作用的依赖关系，自动分析出响应源。上面的例子可以重写为：props.itemList.length作为依赖（和计算属性的行为类似）。每当传入的itemList.length变化时，回调会再次执行。watchEffect()的的监听，只需要显示的调用watchEffect()的返回函数就可以了，例如：6.组件的事件调用
6.1 子组件调用父组件的方法
vue3.0中如果我们的子组件触发父组件的方法，我们的做法:子组件
父组件
vue3.2语法糖中,子组件要触发的事件需要显式地通过defineEmits() 宏来声明
子组件
const emit = defineEmits(['inFocus', 'submit'])
function buttonClick(parmas) {
emit('submit', parmas)
}
父组件
vue3.0中如果父组件触发子组件的方法或是属性，直接在return函数中返回就可以，数据都是默认隐式暴露给父组件的。
父组件中通过ref获取到子组件，并对子组件暴露的方法进行访问父组件
vue3.2语法中，父组件的调用方式相同，子组件通过defineExpose()将方法或是属性暴露出去
子组件
const isShow = ref(false)
// 父组件调用这个方法
const showSubComponent = () => {
isShow.value = !isShow.value
}
// 通过defineExpose将方法暴露出去
defineExpose({
showSubComponent
})
父组件
import { ref } from 'vue';
//获取子组件ref
const todoItemVueRef = ref(null)
// 调用子组件的方法
const callItemFuncHandel = () => {
todoItemVueRef.value.showSubComponent()
}
在vue3.0与vue3.2中创建Vuex没有区别，只不过在模板中使用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进行解构,然后可以直接在中使用state中的值
vue3.2中没有了return，需要我们显示的获取要使用的stare的值
触发callChangeColorHandel 函数，在