vue3简介

最新推荐文章于 2025-10-12 17:51:26 发布

原创最新推荐文章于 2025-10-12 17:51:26 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue 3.0的新特性，包括更快的性能、setup API的使用、reactivity库独立、组件解耦、fragment支持、setup中的变化、Proxy响应式原理及改进。还涵盖了props处理、computed和watch的更新，以及context和watch的实战应用。

文章目录

- 与2.0相比新增
vue3

与2.0相比新增

· 3.0比2.0 快2倍

· 3.0去掉了filter, 么有beforeCreate created,用setup取代

· reactivity是可以单独作为库使用的

· 单独功能可以抽离取代了mixin 优于mixin 解决上下反复横跳

· 支持多个子节点 fragment

· setup里没有this

· Proxy实现响应式不需要set delete 兼容性并不好

· 响应式方面性能得到很大提升不用初始化的时候就递归遍历属性

· 响应式不区分数组和对象

· 3.0兼容IE12以上

vue3

vue3 将状态，函数，计算结果，生命周期等都定义在setup中，符合组件内高内聚，组件外低耦合的形式

定义状态和函数

定义状态
 setup(props){
	  var firstName = ref("张");  //定义值类型; 值类型在函数中需要调用打点value；
	  var person = reactive({    //定义引用类型;
      name: "王五",
      age: 20,
    });
    const animal = readonly(reactive({    //定义只读状态，不能修改，
      name: "老虎",
      age: "10"
    }))
    function add(){   //定义普通函数，

}
    return{     //将状态或者函数返回出去，在组件中应用;
    } 
}

定义props


  props: ["msg"],
  // 会把父组件传递的数组，“注入”到当前组件的setup形参。
  setup(props) {
    console.log(props.msg);
}

定义computed

import { computed, ref } from "vue";
setup(){
	 var filterMsg = computed(() => props.msg.substr(0, 5));//定义一个普通的
	//定义一个getter和setter
	 var filterCount = computed({
      get() {
        return count.value + 20;
      },
     
      set(val) {
        count.value = val;
      },
    });
}

props解构

因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
我们可以通过 toRefs方法完成可以解构赋值，且不影响属性的响应式

var {name} = toRefs(props);

context


  setup(props, context) {
	console.log(context.slots.default())   //默认插槽的值;
	console.log(context.attrs.def)  //自定义属性的值;
	  context.emit('myevent', {name: 'hello world'})   //事件发射；
}

watch监听

 // 参数1： 监听的数据。参数2： 回调函数
    watch(firstName, (newValue, oldValue) => {
      // console.log(oldValue); // 旧值
      fullName.value = newValue + lastName.value;
    });
    // 如果监听的数据是一个引用类型，参数1：写成回调函数的形式
    watch(
      () => person.name,
      (newValue, oldValue) => {
        console.log(oldValue);
        console.log(newValue);
      }
    );