vue3学习笔记

1、vue3引入的不是vue构造函数而是createApp工厂函数

2、vue3可以没有根标签（可以不用将所有的标签包含在一个标签里）

3、script setup 中，引入的组件可以直接使用，无需再通过components进行注册

4、steup里为什么不能用this 因为她比beforeCreate和created这两个生命周期还要快，所以它里面的this打印出来是undefined

5、使用ref将数据变成响应式数据，必须得通过.value 来修改的

let name='兰'
name.value='懒'

如果定义的ref是个对象呢，就用XX.value.xx来进行修改

6、reactive只能定义对象类型的响应式数据，修改数据的时候可以直接修改不用通过.value 这种形式

 setup(){
    let data=reactive({
      name:'兰儿',
      age:18,
      job:{
        occupation:'程序员',
        salary:'10k'
      },
      hobby:['刷剧','吃饭','睡觉']
    })
    //方法
    function say(){
      data.job.salary='12k'
      data.hobby[0]='学习'
    }
    return {
      data,
      say,
    }
  }
}

7、ref和reactive的区别

• ref用来定义基本数据类型;ref也能定义对象和数组的，它只是内部自动调用了reactive来转换
• ref通过object.defineProperty()的get和set来实现数据劫持
• ref修改数据需要.value，读取数据时可以直接读取不需要.value
• reactive用来定义对象或数组类型数据
• reactive通过使用[Proxy]来实现数据劫持的
• reactive操作和读取数据都不需要.value

8、使用computed、watch

vue3中，computed和watch都变成了组合式API,所以使用的时候就用从vue中引入

vue3的写法

import {computed,reactive} from 'vue'
export default{
  setup(){
  let names=reactive({
    firstName:'阿',
    lastName:'兰'
  })
  fullName=computed(()=>{
  return names.firstName+names.lastName
})
  return {
    names,
    fullName
  }
}
}
  

vue2的写法

export default{
  data(){
    return{
      firstName:'阿',
      lastName:'兰'
    }
  },
  computed{
    fullName(){
      return firstName+lastName
    }
  }
}
  

9、vue3的声明周期与vue2没有多大的改变，只是改变了销毁前和销毁后，由beforeDestory，destoryed变成beforeUnmount,unMounted

在steup里应该这样写

• beforeCreate===>beforeCreate
• created=======>created
• beforeMount ===>onBeforeMount
• mounted=======>onMounted
• beforeUpdate===>onBeforeUpdate
• updated =======>onUpdated
• beforeUnmount ==>onBeforeUnmount
• unmounted =====>onUnmounted

除了beforeCreate和created不在组合式API中，其他的都要从组合式API中引入

10、toRef与toRefs的用法，这两个都是组合式API

toRef就是将数据变成ref类型的数据，我们之前通过ref定义的数据都是通过names.xx来读取的，通过toRef可以直接通过xx读取

import {reactive} from'vue'
  export default { 
  setup(){
    let names=reactive({ 
      name:'老兰',
      age:23,
      job:{ salary:10 } 
    })
    function say(){
      console.log(names.name,names.job.salary)
    }
      return {
        names,
        say
      } 
  } 
}

import {reactive} from'vue'
  export default { 
  setup(){
    let names=reactive({ 
      name:'老兰',
      age:23,
      job:{ salary:10 } 
    })
    function say(){
      console.log(name,job.salary)
    }
return {
  	name:toRef(names,'name'), 
    age:toRef(names,'age'),
    salary:toRef(names.job,'salary') 
		}
	}
}

toRefs就是多个转化为响应式

<h1>当前姓名:{{name}}</h1> 
<h1>当前薪水:{{job.salary}}</h1>
   
return { ...toRefs(names) }

11、router

在vue2中跳转页面是this.$router.push来实现的,但是vue3中没有这些，它定义了一个vue-router 然后引入useRouter和useRoute，相当于vue2的this.$router和this.$route

import {useRouter,useRoute} from "vue-router";
setup(){
  const router= useRouter()
  const route= useRoute()
  function fn(){
   useRouter.push('/about')
  }
  onMounted(()=>{
    console.log(route.query.code)
  })
  return{
    fn
  }
}