广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >什么是语法糖?Vue3.2中怎么使用语法糖?
  • 460
分享到

什么是语法糖?Vue3.2中怎么使用语法糖?

语法糖Vue.js 2022-11-28 22:11:11 460人浏览 安东尼
摘要

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

3.计算属性

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

<script setup>
import { ref, computed } from 'Vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意:我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

当调用fullName.value = 'John Doe'时,setter会被调用,而firstNamelastName会被更新,在vue3.2中我们可以直接在<template>标签中使用它,不在需要return返回。

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

4. watch

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

<script setup>
import { ref,watch } from 'vue';

const props = defineProps({
    title: String,
    itemList: {
        type: Array,
        default: () => [{
            text: 'title',
            value: 0
        }]
    }
})

watch(() => props.itemList.length,(newValue,oldValue) => {
    console.log('newValue===',newValue);
    console.log('oldValue===',oldValue);
})
</script>

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

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

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

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

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

<script setup>
import { ref,watch } from 'vue';

const props = defineProps({
    title: String,
    itemList: {
        type: Array,
        default: () => [{
            text: 'title',
            value: 0
        }]
    }
})
// 同时监听多个属性
watch(() => [props.itemList,props.title],(newValue,oldValue) => {
    console.log('newValue===',newValue);
    console.log('oldValue===',oldValue);
},{deep:true})
  
</script>

5. watchEffect()

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

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

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

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

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

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

6.组件的事件调用

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

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

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

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

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

子组件
<script setup>
const emit = defineEmits(['inFocus', 'submit'])

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

<script setup>
  const submitHandel = () => {
    console.log('子组件调用了父组件的submitHandel方法');
  }
};
</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 'vue';
  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 'vue';
  //获取子组件ref
  const todoItemVueRef = ref(null)
  // 调用子组件的方法
  const callItemFuncHandel = () => {
      todoItemVueRef.value.showSubComponent()
  }
</script>

7.Vuex的使用

vue3.0vue3.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: 'TodoItem',
  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 'vuex';
const store = useStore()
// 获取后在<template>中使用
const itemList = store.state.itemList
</script>

8. <style>中的 v-bind

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

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

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

三. 总结

整体来说,setup语法糖的引入简化了使用Composition API时冗长的模板代码,也就是让代码更加简洁,可读性也更高。并且官方介绍vue3.2在界面渲染的速度以及内存的使用量上都进行了优化,本文只是对setup语法糖的常用方式进行了总结,更多vue3.2新特性可以去官方文档查看。

学习视频分享:WEB前端开发编程基础视频)

以上就是什么是语法糖?Vue3.2中怎么使用语法糖?的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 什么是语法糖?Vue3.2中怎么使用语法糖?

本文链接: https://www.lsjlt.com/news/173612.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 什么是语法糖?Vue3.2中怎么使用语法糖?
    3.计算属性我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。说白了就是这个计算属性的值依赖于其他响应式属性的值,依赖的属性发生变化,那么这个计算属性的值就会进行重新计算。<script setup> import { ref...
    99+
    2022-11-28
    语法糖 Vue.js
  • Vue3.2中如何使用语法糖
    今天小编给大家分享一下Vue3.2中如何使用语法糖的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一. 概述在Vue2时期,组...
    99+
    2023-07-04
  • 一文搞懂Vue3.2中setup语法糖使用
    目录前言一、如何使用setup语法糖二、data数据的使用三、method方法的使用四、watchEffect的使用五、watch的使用六、computed计算属性的使用七、prop...
    99+
    2022-11-13
  • es6语法糖怎么使用
    本篇内容主要讲解“es6语法糖怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6语法糖怎么使用”吧!es6语法糖有:1、对象字面量,是指以“{}”形式直接表示的对象;2、箭头函数,一种...
    99+
    2023-07-05
  • Vue3.2 setup语法糖及Hook函数基本使用
    目录引言setup(语法糖)1、基本使用2、自动注册3、组件通信defineEmit ----> [子组件向父组件事件传递] 代码示列:defineExpose ---->...
    99+
    2022-11-13
  • es6中语法糖Decorator怎么用
    这篇文章主要介绍了es6中语法糖Decorator怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Decorator(修饰器/装饰器)是...
    99+
    2022-10-19
  • es6语法糖的含义是什么
    本篇内容介绍了“es6语法糖的含义是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • Vue3中的script setup语法糖怎么使用
    这篇文章主要介绍了Vue3中的script setup语法糖怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中的script setup语法糖怎么使用文章都会有所收获,下面我们一起来看看吧。scr...
    99+
    2023-07-04
  • vue3更新的setup语法糖怎么用
    本文小编为大家详细介绍“vue3更新的setup语法糖怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3更新的setup语法糖怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。语法糖用法://&nb...
    99+
    2023-06-30
  • Java中的语法糖有哪些及怎么使用
    本篇内容主要讲解“Java中的语法糖有哪些及怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java中的语法糖有哪些及怎么使用”吧! Java中的语法糖...
    99+
    2022-10-19
  • 怎么在Vue3中使用<script lang=“ts“ setup>语法糖
    迁移组件以下组件有两个道具(要显示的和一个标志)。通过另一个组件,计算模板中显示的小马图像的URL,基于这两个道具。该组件还会在用户单击它时发出一个事件。The image selected while the Ponypony ...
    99+
    2023-05-16
    Vue3 setup
  • Vue3怎么使用setup语法糖拒绝写return
    defineProps 代替props接收父组件传递的数据(父组件向子组件传参)父组件:<template> <div>父组件</div> <Child :title="msg&q...
    99+
    2023-05-14
    Vue3 return setup
  • 详解Objective-C中的语法糖@{}究竟是什么
    最近在技术群里有一个群友提出了一个问题,就是为什么下面代码打印的结果不一样? NSMutableDictionary *mDic1 = [NSMutableDictionary ...
    99+
    2022-05-23
    objective-c 语法糖 @{}
  • vue3.0语法糖内的defineProps及defineEmits怎么用
    这篇文章主要介绍“vue3.0语法糖内的defineProps及defineEmits怎么用”,在日常操作中,相信很多人在vue3.0语法糖内的defineProps及defineEmits怎么用问题上存在疑惑,小编查阅了各式资料,整理出简...
    99+
    2023-06-30
  • Vue响应性语法糖怎么配置
    本篇内容主要讲解“Vue响应性语法糖怎么配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue响应性语法糖怎么配置”吧!介绍自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 re...
    99+
    2023-07-05
  • 传说中VUE的语法糖到底是做什么的
    目录一、什么是语法糖?二、VUE中语法糖有哪些?1、最常见的语法糖 v-model2、v-bind 的语法糖3、v-on 的语法糖4、修饰符5、动态css6、注册组件语法糖一、什么是...
    99+
    2022-11-12
  • 一起聊聊Go语言中的语法糖的使用
    目录前言进入正题可变长参数声明不定长数组... 操作符切片循环忽略变量、字段或者导包短变量声明另类的返回值总结前言 由于工作变动,我现在已经开始使用Golang了。用了一段时间之后,...
    99+
    2022-11-13
  • Vue3中的setup语法糖、computed函数、watch函数怎么使用
    这篇文章主要介绍“Vue3中的setup语法糖、computed函数、watch函数怎么使用”,在日常操作中,相信很多人在Vue3中的setup语法糖、computed函数、watch函数怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简...
    99+
    2023-07-05
  • vue3中使用ref语法糖的示例代码
    自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题,而 ref 需要到处使用 .value 则感觉很繁...
    99+
    2022-11-13
  • Vue3.2中的setup语法怎么使用
    本篇内容主要讲解“Vue3.2中的setup语法怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3.2中的setup语法怎么使用”吧!vue3.2 到底更新了什么?根据原文内容的更新...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作