vue3.0 的使用和理解

现在vue3已经稳定了 是时候用vue3了，最近抽出时间看了看vue3 也总结了点知识点。

1. vue3.0不同于vue2.0的是最主要的变化就是

1. 组合式api (Setup) //主要
2. vue的按需引入 v-model指令 ref toRefs进行按需引入
3. 整体文件的布局有了改变 移除了config 等文件等
4. 还有就是一些（数据监听的优化用 Proxy替换掉Object.defineProperty，重构 Virtual DOM，）这些变动。 这些的话不主要可以做一个理解。

- 详细讲解

1.组合式api (Setup)

1. setup 接受两个参数： props ，context （attrs, slots, emit） 。 setup在它俩之间执行 beforeCreate 和 Created . setup不能使用到this .

2. setup 中声明变量值的时候需要使用ref()

ref会返回一个property对象 ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式
API中经常使用。Setup中声明的变量和方法类都得return出去

import {ref} from 'vue'
	
       setup(props,context ){
			let datazhi = ref('');
			function xiangsshncd() {
				
			}
			return {
				datazhi,
				xiangsshncd
			}
		}

3. props是响应式的不能使用es6的解构 所以用到了toRefs响应式对象解构 否则props会失去响应式

4. 需要用到挂载到全局实例（createApp）上的一些ui框架什么的咋办 比如elm-ui

要用到getCurrentInstance() 这样我们就可以使用了

import {getCurrentInstance} from 'vue'

        setup(props,context ){
			let {
				proxy
			} = getCurrentInstance();
			
			proxy.$notify({  //elm-ui内容
				title: '警告',
				message: '这是一条警告的提示消息',
				type: 'warning'
			});
		}

2.vue的按需引入 v-model指令 ref toRefs进行按需引入

    //列
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
		watch,
		getCurrentInstance
	} from 'vue'

3.文件布局的改变 缺少了config 文件

比如常见的跨域处理

用vue.config.js文件来举例 我们处理开发中最为常见的本地代理转发的配置

1. 在根目录下创建 vue.config.js
2. 写入相应处理

//处理跨域

module.exports={
    devServer:{
        proxy:{
            '/api':{
                target: 'https://mp.weixin.qq.com',
                changeOrigin:true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

    }
}

努力搬砖 努力生活！