Vue3的新写法总结

script的新写法

javascript 复制代码
<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

// <script setup> 语法糖
<script setup>
import { ref } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};
</script>

使用<script setup> 编写组件

data

  1. 以前在 data 中创建的属性,现在全都用 ref() 声明。
  2. 在 template 中直接用,在 script 中记得加 .value 。
javascript 复制代码
 // 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>

methods

声明事件方法在script标签里,创建一个方法对象即可

javascript 复制代码
// Vue3 的写法
<template>
  <div @click="onClick">
    这是一个div
  </div>
</template>

<script setup>

// 注意这部分
const onClick = () => {
  console.log('clicked')
}

</script>

props

声明props,我们可以使用defineProps()

  • 使用props,要注意不要使用解构赋值的写法
javascript 复制代码
// Vue3 的写法
<template>
  <div>{{ foo }}</div>
</template>

<script setup>

// 注意这里
const props = defineProps({
  foo: String
})

// 在 script 标签里使用
console.log(props.foo)
</script>

emits事件

  • 声明 emits 我们可以用 defineEmits()
javascript 复制代码
// Vue3 的写法
<template>
  <div @click="onClick">
    这是一个div
  </div>
</template>

<script setup>

// 注意这里
const emit = defineEmits(['click']);

const onClick = () => {
  emit('click') // 注意这里
}

</script>

computed

javascript 复制代码
// 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>

watch

写法1: watch

watch 需要你明确指定依赖的变量,才能做到监听效果

javascript 复制代码
// 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

而 watchEffect 会根据你使用的变量,自动的实现监听效果。

javascript 复制代码
// 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>

生命周期

  1. Vue3中将两个 destroy 相关的钩子,改成了 unmount
  2. 在 <script setup> 中,不能使用 beforeCreate 和 created 两个钩子。
  3. 熟悉相关的生命周期,只需要记得在 setup 里,用 on 开头,加上大写首字母就行。

选项式API

javascript 复制代码
// 选项式 api 写法
<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {},
  created() {},
  
  beforeMount() {},
  mounted() {},
  
  beforeUpdate() {},
  updated() {},
  
  // Vue2 里叫 beforeDestroy
  beforeUnmount() {},
  // Vue2 里叫 destroyed
  unmounted() {},
  
  // 其他钩子不常用,所以不列了。
}
</script>

组合式API

javascript 复制代码
// 组合式 api 写法
<template>
  <div></div>
</template>


<script setup>
import {
  onBeforeMount,
  onMounted,

  onBeforeUpdate,
  onUpdated,

  onBeforeUnmount,
  onUnmounted,
} from 'vue'

onBeforeMount(() => {})
onMounted(() => {})

onBeforeUpdate(() => {})
onUpdated(() => {})

onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>
相关推荐
熊的猫32 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6