vue 3.0与2.0的区别

vue3新特性
1/数据响应式原理重新实现(ES6 proxy 代替了ES5的Object.defineProperty) Vue.set()
解决了:例如数据更新检测bug vue2的push,shift 不是原生js的方法,vue二次封装了
大大优化了响应式监听的性能(可以监听复杂的数据类型)
2.虚拟dom-新算法(更快,更小)
3.提供了composition api ,可以更好的逻辑复用
4.模版可以有多个根元素
5.源码typescript重写,有更好的类型推导
6.移除了过滤器推荐使,计算属性

vite的使用
vite低配版的vue-cli,企业做项目还是用vue-cli

npm init vite-app demo

在main.js入口挂载

2.0版本
创建vue实例 new Vue({})
创建路由实例 new VueRouter()
创建仓库  new Vuex.Store()

3.0版本
import { createApp } from 'vue'
import App from './App.vue'

创建vue实例 createApp(App).mount('#app')
创建路由实例 createRouter()
创建仓库  createStore()

在体验

在vue2 是options API (单项API)

vue3.0是 composition API 组合式api

import { setup, reactive ,ref,computed,toRefs,watch } from 'vue'

1.setup函数入口

2.reactive 函数 ,让复杂数据类型变成响应式

3.ref函数,将基本数据类型变成响应式

4.toRefs-解构保留响应式状态

5.readonly 让数据变成只读状态

//setup函数是当前组件入口函数,compositionAPI的起点(入口)

//生命周期比所有的钩子函数都要早,比之前的beforeCreate这个钩子都要早

//setup函数没有this,结果是undefined

export default {
   setup(){


  }      
}

//setup函数中定义的数据/方法 ...计算属性...都需要返回

//setup函数中定义的数据默认不是响应式的

//如果定义的复杂数据类型需要是响应式的,就必须要用reactive()函数包裹数组,对象

//如果将基本数据类型处理成响应式,就需要用到ref()函数

export default {
   setup() {
     //const obj = {name:'zs',age:12}
     const obj = reactive({name:'zs',age:12})  
     //const money = reactive(100) 报错
     const changeName =()=>{
       obj.name ='李四'
       console.log(obj)
     }
   } 
   return  {
       obj,
       changeName,
       //money 报错不用
   }
}

ref()函数

作用:将简单类型数据,转换成响应式对象

1/ref函数接受一个简单类型的值,返回一个可改变的ref响应式对象,返回的对象有唯一的属性 value

2/在setup函数中,通过ref对象的value属性,可以访问到值

3/在模版中,ref属性会自动解套,不需要额外的.value

const money  = ref(100)
const changeMoney = () => {
　　money.value = 0
}

//如果将数据定义到一个整体对象中,直接return这个对象,结构中使用多.几次

//如果不想结构中写的很繁琐,可以解构,但是解构后有的数据会丢失响应式状态

//解决方式:使用toRefs()函数包裹数据,再进行解构

const bigObj = {
    obj:{name:'zs',age:12}
    str:'这是测试',
    money:100
}

return {
   ...toRefs(bigObj)   //如果不这么写,直接解构,会造成响应式状态丢失
}

//不想某些数据发生变化,只允许读取,可以使用readonly函数进行处理

export default {
  setup()  {
    const obj = reactive(name:'zs',age:12)
    const zobj = readonly(obj)
    const changeName = () =>{
       zobj.name = 'lisi'   //去执行后会有一个警告,不允许修改的
   }
    return  {
      zobj,
      changeName
   }
   
  }
}

vue3.0 的计算属性

const nextAge = computed({
    return +age.value +1 
})

const age = ref(100)
const nextAge = computed({
   get(){
      return +age.value +1
   },
   set(val)
  {
       age.value = newValue -1 
  }
})

return {
   nextAge
}

vue3.0的watch(数据源,处理方法,配置对象)

//监听对象中的某个属性 (监听不需要写在返回)
watch(()=>bigObj.people,(newValue)=>{
  console.log(newValue)
},{deep:true,immediate})

vue3.0的生命周期对比图

//vue3中的钩子函数,不在使用beforeCreate 和 created ,而是用setup,setup中没有this

setup(){
//功能a模块的钩子
  onBeforeMount(()=>{
     console.log('挂在前')
  })
  onMounted(()=>{
     console.log('挂载dom结构-2')
  })
  //功能b模块的钩子
  onBeforeMount(()=>{
     console.log('挂在前-3')
  })
  onMounted(()=>{
     console.log('挂载dom结构-4')
  })
}

因为是函数,可以多次调用,上面的执行顺序是  1,3,2,4

vue3.0父传子的方式

export default {
  props: {
    money:{
      type:Number,
      default:0
   }
  }
  setup(props,context)
 {
    
  const changeMoney =() =>{
     context.emit('change',12)
   }
   return 
   {
      changeMoney
    }
 }
}

vue3中也有依赖注入 provide 和 inject

vue2中使用this.$refs.xxx获取dom

在vue3.0中需要声明一个ref

<template>
   <h1 ref ="hRef"></h1>
</template>

export default
{

  setup(){


  const hRef = ref(null) //注意,这里的hRef 和上面的要一致
  onMounted(()=>{
     console.log(hRef.value) // .value 获取dom元素
  })
  
 }
}