Vue3.0 - 基本使用

vue3.0支持vue2.0的所有语法。 所以本文只简单描述一下vue3.0当中的一些常用方法及和2.0之间做一下简单的对比。

与Vue2.0的区别

  •     性能提升
  •     template模板中支持使用多个根节点, 即不需要在多个标签的外面套一个div
  •     main.js中注册的写法
  •     Vue3中建议使用  :deep() 替代 /deep/ 
  •     加强对typescript的支持,原来是可以配置使用,现在是可以直接使用
  •     vue3.0是 composition API 组合式api 
    import { setup, reactive ,ref,computed,toRefs,watch... } from 'vue'  
    setup为入口函数

 在2.0中,data(){ return {...}} 用来放变量, methods:{...} 用来放方法,computed:{...}用来做计算等等,如果一个页面中的逻辑很多,js代码以后很难维护。

 而在3.0中, 它们都可以放到一个setup(){... return{...}} 函数中

(⚠️ 3.2以后可以写成<script setup>...</script> 该写法会自动将变量和函数return出去。),

也就是我们可以像原来正常写js一样,把一些相关的变量和方法写在一块,并且可以单独提取出去,再引用。 更方便后期代码的修改和运维。

setup 选项在组件创建之前执行。此外,我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

下面举例常用的函数(以下均为包裹在<script setup></script>中的写法。):

1. ref - 监听简单类型的变化,不能监听复杂类型的变化(对象/数组)要改变数值的时候要用 变量.value='xxx' 更改。 底层是reactive。

const count = ref(0)

2. reactive - reactive可以监听复杂类型的变化,如果要改变对象或数组值的时候,要重新赋值,不能直接更改, 底层是proxy。

const state =reactive({
    num1:0,
    num2:0
});

 3. computed - 计算属性

const state =reactive({
    num1:0,
    num2:0,
    result:computed(()=>state.num1*1+state.num2*1)
});
const count =ref(1);
const dbcount = computed(() => {
    return count.value * count.value
})

 

 4. defineProps - 等同于vue2.0中的props,组件接收参数

const props = defineProps({
    title:{
        type:String,
        default:'hello vue 3.0'
    }
});

5. defineEmit - 等同于 vue2.0的$emit 

const emit = defineEmits(['sendMsgC2']);
const sendMsg =()=>{
    emit("sendMsgC2", state.result);
}

 6. watch - 监听函数

watch(count,(newvalue,oldvalue)=>{
    console.log(newvalue);
    console.log(oldvalue);
});

 7. toRefs - 创建响应式引用。例如一些从后台拿到的数据解构后并非是ref那种响应式数据, 无法在页面中响应式改变其值, 可以先toRefs一下再解构

...toRefs(data)

以下例子就是一个2.0和3.0简单写法的对比例子(计算两个数的和,点击按钮将数据传送给父组件):

Vue 2.0 

<template>
  <h2>vue 2.0</h2>
  <input type="text" v-model="num1" />+ <input type="text" v-model="num2" />=
  <span>{{ result }}</span> <span>{{ title }}</span>
  <button @click="sendMsg">send msg</button>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "hello vue 2.0",
    },
  },
  data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  computed: {
    result() {
      return this.num1 * 1 + this.num2 * 1;
    },
  },
  methods: {
    sendMsg() {
      this.$emit("sendMsgC1", this.result);
    },
  },
};
</script>

<style>
</style>

 Vue 3.0

<template>
  <h2>vue 3.0</h2>
  <input type="text" v-model="state.num1" />+
  <input type="text" v-model="state.num2" />= <span>{{ state.result }}</span>
  <span>{{ title }}</span>
  <button @click="sendMsg">send msg</button>
  <hr />
  <h2>其他:</h2>
  <input type="text" v-model="count" />
</template>

<script setup>
import { computed, reactive, ref, defineProps, watch } from "vue";
let count = ref(0);
const props = defineProps({
  title: {
    type: String,
    default: "hello vue 3.0",
  },
});
const emit = defineEmits(["sendMsgC2"]);
const sendMsg = () => {
  emit("sendMsgC2", state.result);
};
const state = reactive({
  num1: 0,
  num2: 0,
  result: computed(() => state.num1 * 1 + state.num2 * 1),
});
watch(count, (newvalue, oldvalue) => {
  console.log(newvalue);
  console.log(oldvalue);
});
watch(state, (newvalue, oldvalue) => {
  console.log(newvalue);
  console.log(oldvalue);
});
</script>

<style>
</style>

父组件中使用3.0语法引用组件和接收传递过来的数据:

<template>
  <C1 :title="'hh,vue 2.0'" @sendMsgC1='getMsgFromc1'></C1>
  <C2 :title="'hh,vue 3.0'" @sendMsgC2='getMsgFromc2'></C2>
</template>

<script setup>
import { onMounted } from 'vue';
import C1 from './components/C1.vue'
import C2 from './components/C2.vue'
const getMsgFromc1=(val)=>{
  alert(`传递过来的结果值为:${val}`)
};
const getMsgFromc2=(val)=>{
  alert(`传递过来的结果值为:${val}`)
};
onMounted(()=>{
  console.log('onmounted...')
})
</script>

<style>

</style>

 Vue3 介绍 | Vue.js

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值