快速上手Vue3

快速上手Vue3

1.为什么使用Vue3？

打包文件的大小更小

内存消耗更少

渲染速度更快

总之一句话：性能提升了

2.新增特性

setup

简单理解就是vue2.x原来分出来的一个个模块，比如 data，methods，conputed这些，统统放在了一个setup里面，然后把页面需要用到的进行return就行。

3.从vue2.x的基础上快速上手vue3

data

vue2

data:{
     
	return:{
     
		str:'啦啦啦'，
		obj：{
     
			name：'zs',
			age:18
		}
 	}
}

vue3

setup(){
     
    const str=ref('啦啦啦')
    const obj=reactive({
     
  			 	name：'zs',
				age:18 
   			 })
    return {
     
        str,obj
    }
}

快速记忆就是：

data里面的简单数据类型使用ref，复杂数据类型使用reactive

需要注意的是，如果在setup里面使用ref的值是需要使用它的value属性的，比如：

const str1=ref('啦啦啦')
const str2=ref('哈哈哈')
console.log(str1.value+str2.value) //输出 啦啦啦哈哈哈

在template里使用的话还是和vue2一样，不需要加.value

methods

vue2

methods:{
     
    fn(){
     
        console.log('funcrtion')
    }
}

vue3

setup(){
     
    function fn(){
     
        console.log('funcrtion')
    }
    return {
     
        fn
    }
}

现在方法更像是在js里使用一样，声明，然调用

钩子函数（个别例子，以点见面）

vue2

onMounted(){
     
      console.log('初始化')
}

vue3

setup(){
     
    onMounted(()=>{
     
        console.log('初始化')
    })
}

现在是直接使用这个钩子api，把需要做的操作放在回调里面去就行

其他

其他的后续再写，不过vue3把这几点学会了，做个小项目练练手问题不大