首页 > 其他分享 >Vue3 里 script 的三种写法

Vue3 里 script 的三种写法

时间：2023-07-29 14:01:09浏览次数：41  
标签：count const script ref value Vue3 写法

一、Vue3 里 script 的三种写法

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，

1、最基本的 Vue2 写法

 html复制代码<template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       count: 1,
     };
   },
   methods: {
     onClick() {
       this.count += 1;
     },
   },
 }
 </script>

2、setup() 属性

 xml复制代码<template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 import { ref } from 'vue';
 export default {
 ​
   // 注意这部分
   setup() {
     let count = ref(1);
     const onClick = () => {
       count.value += 1;
     };
     return {
       count,
       onClick,
     };
   },
   
 }
 </script>

3、<script setup>

 xml复制代码<template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script setup>
 import { ref } from 'vue';
 ​
 const count = ref(1);
 const onClick = () => {
   count.value += 1;
 };
 </script>

正如你看到的那样，无论是代码行数，还是代码的精简度，<script setup> 的方式是最简单的形式。

如果你对 Vue 很熟悉，那么，我推荐你使用 <script setup> 的方式。

这种写法，让 Vue3 成了我最喜欢的前端框架。

如果你还是前端新人，那么，我推荐你先学习第一种写法。

因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。

第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。

第二种写法，所有的对象和方法都需要 return 才能使用，太啰嗦。除了旧项目，可以用这种方式体验 Vue3 的新特性以外，我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。

所以，接下来，我们主要介绍的，也就是 <script setup> ，这种写法里需要了解的内容。

注意： <script setup> 本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。

二、如何使用 <script setup> 编写组件

学习 Vue3 并不代表你需要新学习一个技术，Vue3 的底层开发思想，跟 Vue2 是没有差别的。

V3 和 V2 的区别就像是，你用不同的语言或者方言说同一句话。

所以我们需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。

1、data——唯一需要注意的地方

整个 data 这一部分的内容，你只需要记住下面这一点。

以前在 data 中创建的属性，现在全都用 ref() 声明。

在 template 中直接用，在 script 中记得加 .value 。

在开头，我就已经写了一个简单的例子，我们直接拿过来做对比。

1）写法对比

 xml复制代码 // Vue2 的写法
 ​
 <template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       count: 1,
     };
   },
   methods: {
     onClick() {
       this.count += 1;
     },
   },
 }
 </script>
 xml复制代码 // Vue3 的写法
 ​
 <template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script setup>
 import { ref } from 'vue';
 ​
  // 用这种方式声明
 const count = ref(1);
 ​
 const onClick = () => {
    // 使用的时候记得 .value
   count.value += 1;
 };
 </script>

2）注意事项——组合式 api 的心智负担

a、ref 和 reactive

Vue3 里，还提供了一个叫做 reactive 的 api。

但是我的建议是，你不需要关心它。绝大多数场景下，ref 都够用了。

b、什么时候用 ref() 包裹，什么时候不用。

要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。

当然，你可以完全不需要关心这一点，跟过去写 data 一样就行。

只不过这样做，你在使用的时候，需要一直 .value。

c、不要解构使用

在使用时，不要像下面这样去写，会丢失响应性。

也就是会出现更新了值，但是页面没有更新的情况

 xml复制代码// Vue3 的写法
 <template>
   <div>{{ count }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script setup>
 import { ref } from 'vue';
 ​
 const count = ref(1);
 const onClick = () => {
   // 不要这样写！！
   const { value } = count;
   value += 1;
 };
 </script>

注意： 学习 Vue3 就需要考虑像这样的内容，徒增了学习成本。实际上这些心智负担，在学习的过程中，是可以完全不需要考虑的。

这也是为什么我推荐新人先学习 Vue2 的写法。

2、methods

声明事件方法，我们只需要在 script 标签里，创建一个方法对象即可。

剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。

 xml复制代码// Vue2 的写法
 <template>
   <div @click="onClick">
     这是一个div
   </div>
 </template>
 ​
 <script>
 export default {
   methods: {
     onClick() {
       console.log('clicked')
     },
   },
 }
 </script>
 xml复制代码// Vue3 的写法
 <template>
   <div @click="onClick">
     这是一个div
   </div>
 </template>
 ​
 <script setup>
 ​
 // 注意这部分
 const onClick = () => {
   console.log('clicked')
 }
 ​
 </script>

3、props

声明 props 我们可以用 defineProps()，具体写法，我们看代码。

1）写法对比

 xml复制代码// Vue2 的写法
 <template>
   <div>{{ foo }}</div>
 </template>
 ​
 <script>
 export default {
   props: {
     foo: String,
   },
   created() {
     console.log(this.foo);
   },
 }
 </script>
 xml复制代码// Vue3 的写法
 <template>
   <div>{{ foo }}</div>
 </template>
 ​
 <script setup>
 ​
 // 注意这里
 const props = defineProps({
   foo: String
 })
 ​
 // 在 script 标签里使用
 console.log(props.foo)
 </script>

2）注意事项——组合式 api 的心智负担

使用 props 时，同样注意不要使用解构的方式。

 xml复制代码<script setup>
 const props = defineProps({
   foo: String
 })
 ​
  // 不要这样写
 const { foo } = props;
 console.log(foo)
 </script>

4、emits 事件

与 props 相同，声明 emits 我们可以用 defineEmits()，具体写法，我们看代码。

 xml复制代码// Vue2 的写法
 <template>
   <div @click="onClick">
     这是一个div
   </div>
 </template>
 ​
 <script>
 export default {
 ​
   emits: ['click'], // 注意这里
   methods: {
     onClick() {
       this.$emit('click'); // 注意这里
     },
   },
  
 }
 </script>
 xml复制代码// Vue3 的写法
 <template>
   <div @click="onClick">
     这是一个div
   </div>
 </template>
 ​
 <script setup>
 ​
 // 注意这里
 const emit = defineEmits(['click']);
 ​
 const onClick = () => {
   emit('click') // 注意这里
 }
 ​
 </script>

5、computed

直接上写法对比。

 xml复制代码// Vue2 的写法
 <template>
   <div>
     <span>{{ value }}</span>
     <span>{{ reversedValue }}</span>
   </div>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       value: 'this is a value',
     };
   },
   computed: {
     reversedValue() {
       return value
         .split('').reverse().join('');
     },
   },
 }
 </script>
 xml复制代码// Vue3 的写法
 <template>
   <div>
     <span>{{ value }}</span>
     <span>{{ reversedValue }}</span>
   </div>
 </template>
 ​
 <script setup>
 import {ref, computed} from 'vue'
 const value = ref('this is a value')
 ​
 // 注意这里
 const reversedValue = computed(() => {
   // 使用 ref 需要 .value
   return value.value
     .split('').reverse().join('');
 })
 ​
 </script>

6、watch

这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。

两种写法的区别是：

  • watch 需要你明确指定依赖的变量，才能做到监听效果。
  • 而 watchEffect 会根据你使用的变量，自动的实现监听效果。

1）直接使用 watch

 xml复制代码// Vue2 的写法
 <template>
   <div>{{ count }}</div>
   <div>{{ anotherCount }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 export default {
   data() {
     return {  
       count: 1,
       anotherCount: 0,
     };
   },
   methods: {
     onClick() {
       this.count += 1;
     },
   },
   watch: {
     count(newValue) {
       this.anotherCount = newValue - 1;
     },
   },
 }
 </script>
 xml复制代码// Vue3 的写法
 <template>
   <div>{{ count }}</div>
   <div>{{ anotherCount }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script setup>
 import { ref, watch } from 'vue';
 ​
 const count = ref(1);
 const onClick = () => {
   count.value += 1;
 };
 ​
 const anotherCount = ref(0);
 ​
 // 注意这里
 // 需要在这里，
 // 明确指定依赖的是 count 这个变量
 watch(count, (newValue) => {
   anotherCount.value = newValue - 1;
 })
 ​
 </script>

#### 2）使用 watchEffect

 xml复制代码// Vue2 的写法
 <template>
   <div>{{ count }}</div>
   <div>{{ anotherCount }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script>
 export default {
   data() {
     return {  
       count: 1,
       anotherCount: 0,
     };
   },
   methods: {
     onClick() {
       this.count += 1;
     },
   },
   watch: {
     count(newValue) {
       this.anotherCount = newValue - 1;
     },
   },
 }
 </script>
 xml复制代码// Vue3 的写法
 <template>
   <div>{{ count }}</div>
   <div>{{ anotherCount }}</div>
   <button @click="onClick">
     增加 1
   </button>
 </template>
 ​
 <script setup>
 import { ref, watchEffect } from 'vue';
 ​
 const count = ref(1);
 const onClick = () => {
   count.value += 1;
 };
 ​
 const anotherCount = ref(0);
 ​
 // 注意这里
 watchEffect(() => {
   // 会自动根据 count.value 的变化，
   // 触发下面的操作
   anotherCount.value = count.value - 1;
 })
 ​
 </script>

7、生命周期

Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在 <script setup> 中，不能使用 beforeCreate 和 created 两个钩子。

如果你熟悉相关的生命周期，只需要记得在 setup 里，用 on 开头，加上大写首字母就行。

 xml复制代码// 选项式 api 写法
 <template>
   <div></div>
 </template>
 ​
 <script>
 export default {
   beforeCreate() {},
   created() {},
   
   beforeMount() {},
   mounted() {},
   
   beforeUpdate() {},
   updated() {},
   
   // Vue2 里叫 beforeDestroy
   beforeUnmount() {},
   // Vue2 里叫 destroyed
   unmounted() {},
   
   // 其他钩子不常用，所以不列了。
 }
 </script>
 xml复制代码// 组合式 api 写法
 <template>
   <div></div>
 </template>
 ​
 ​
 <script setup>
 import {
   onBeforeMount,
   onMounted,
 ​
   onBeforeUpdate,
   onUpdated,
 ​
   onBeforeUnmount,
   onUnmounted,
 } from 'vue'
 ​
 onBeforeMount(() => {})
 onMounted(() => {})
 ​
 onBeforeUpdate(() => {})
 onUpdated(() => {})
 ​
 onBeforeUnmount(() => {})
 onUnmounted(() => {})
 </script>

三、结语

好了，对于快速上手 Vue3 来说，以上内容基本已经足够了。

标签：count,const,script,ref,value,Vue3,写法
From： https://www.cnblogs.com/moranjl/p/17589725.html

相关文章

  • JavaScript学习 -- SM3算法基本原理
    SM3算法是一种由国家密码管理局发布的哈希算法，被广泛用于数字签名和消息认证等应用中。在JavaScript中，我们可以使用第三方库来计算数据的SM3哈希值。本篇文章将介绍SM3算法的基本原理和相关技术，并提供一些实例来演示如何在JavaScript中使用SM3算法。SM3算法基本原理与MD5、SHA-1、S......
  • 移动端的写法
          pc端标准设计图1920*xxxx会有版心     移动端      1 设计图比实际的手机大2背或者三倍     pc端标准设计图1920*xxxx会有版心     移动端      1 设计图比实际的手机大2背或者三倍 ......
  • vue3 TS vite element ali-oss使用方式
    vue3TSviteelementali-oss使用方式安装ali-oss包npmiali-oss-S使用oss封装函数constOSS=require('ali-oss')//importOssfrom'ali-oss'/***[accessKeyId]{String}：通过阿里云控制台创建的AccessKey。*[accessKeySecret]{String}：通过阿里云控制......
  • vue3单页面的写法
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>......
  • Vue3下的axios跨域问题
    0、vue-cli版本vue-Vvue--version   1、根目录找vue.config.js，无则添加文件；然后添加节点： const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭语法检查de......
  • javascript数据类型详解
    文章和代码已经归档至【Github仓库：https://github.com/timerring/front-end-tutorial】或者公众号【AIShareLab】回复javascript也可获取。数据类型JavaScript是一种弱类型或者说动态语言。不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。varage=10;//数字型v......
  • Vue3之ref取render形式组件jsx元素节点
    [2023年7月28日22:16:06]ref取render方式组件节点一开始注意到组件setup和render一起使用的情况，好奇怎么通过ref取到render中jsx里的节点，一开始试了以下的尝试，结果是undefined的：import{defineComponent,ref,onMounted}from"vue";exportdefault......
  • JavaScript入门基础
    文章和代码已经归档至【Github仓库：<https://github.com/timerring/front-end-tutorial>】或者公众号【AIShareLab】回复javascript也可获取。JavaScript简介布兰登·艾奇（BrendanEich，1961年～），10天完成JavaScript设计。最初命名为LiveScript，后来在与Sun合作之后将其改名为......
  • JavaScript学习 -- HMAC算法基本原理
    HMAC（Hash-basedMessageAuthenticationCode）算法是一种基于哈希算法的消息认证码算法。它可以用于验证和保护数据在传输过程中的完整性和真实性。在JavaScript中，我们可以使用HMAC算法来保证数据的安全性。本篇文章将介绍HMAC算法的基本原理和相关技术，并提供一些实例来演示如何在Ja......
  • javaScript判断数据类型的几种方法
    1:typeof返回数据类型，包含这7种：number、boolean、symbol、string、object、undefined、function。typeofnull返回类型错误，返回object。引用类型，除了function返回function类型外，其他均返回object。其中，null有属于自己的数据类型Null，引用类型中的数组、日期、正则也都有......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99