VUE3 的简单理解 - javascript

Vue3 出来已经有一段时间了，最近浏览了一下 Vue3 的学习有感；

学习过程中的一些理解：
抛开底层原理不谈，先说说基本用法的区别：

1. 生命周期的改变

（1）Vue3 新增 setup 函数，也可以< script setup>(语法糖) ，替代 Vue2 中的 beforeCreate 和 created；假若不是语法糖写法的属性需要 return 出去使用
（2）生命周期名字变更； 2. 数据的改变
（1）声明数据的方式

//Vue2
export default {
  props: {
    title: String,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
};

//vue3
import { reactive, ref } from "vue";

export default {
  props: {
    title: String,
  },
  setup() {
    const userObj = reactive({
      username: "",
      password: "",
    });
    const name = ref("tt");

    return { state, name }; //return出去使用
  },
};

(2) methods 等原先的选项 / 数据的改变

//Vue2选项性API
 data () {
 	return {}
}，
methods: {},
mounted(){},
computed(){}

//Vue3选项性API
import {  onMounted } from 'vue'
export default {
	onMounted(() => {
      console.log('组件已挂载')
    })
	setup(){
		const test = () => {
      	// 登陆方法
    	}
     return { test }
	}
}

Vue3 里的 setup 方法中涵盖了所有的东西；但是例如生命钩子啊，computed 等需要从 vue 中 import 进来使用；这样一来就不需要多余的引用导致性能或者打包后太大的问题。

3. 组件 props 和 emit 丶 compute 的改变

   (3) 接收 props 和 emit

//Vue2props
export default {
  props: ['msg'],
  //或
   props:{
          //必须是数字类型
          propA:Number
          //必须是字符串或数字类型
          propB:[String,number]
          //布尔值,如果没有定义，默认值是true
          propC:{
            type:Boolean，
            default:true
          },
   }
  data () {
    return {
    	watchData:'改变'
    }
  },
  mounted(){
  	console.log(this.msg);
  	this.$emit('sendEmit',{})
  },
  watch(){

	}
}

//Vue3props
import {  reactive,onMounted,computed,watch  } from 'vue'
props: {
	msg:String
},
setup (props,context) {
	 const state = reactive({
	 newMsg:computed(() => 'new'+props.msg)
	})
    // 加入不在props上声明属性，则会出现在context.attr里；如果声明了则会出现在props里；props 支持 string 以外的类型，attrs 只有 string 类型
    onMounted(() => {
      console.log('title: ' + props.msg)
      context.$emit('sendEmit',{})
    })
}
return  state ;

vue2 与 vue3 其实概念与理念都是一样的。只是有一些属性获取方式和声名和定义方式稍微变了。 难的是没写过 typescript 的话将两者二组合在一起使用会有点难度；vue3 的合成式 A 提升了代码的解耦程度；按需引用更好的控制了项目的性能和打包大小