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