[JavaScript知识库]vue3知识点(一)

vue3知识点（一）

1、在vue3中可以省略跟标签

2、在子组件中如何主动获取父组件的数据和执行父组件方法

子组件主动获取父组件的数据

this.$parent.数据

子组件主动获取父组件的方法

this.$parent.方法

3、当子组件向父组件传值的时候，进行验证

methods: {
this.$emit('submit',{
 username:this.username,
 password:this.password
 })
}
emits: {
 //监听的名字
 submit:({
  username,
  password
 }) => {
   if(username != '' && password != ''){
    return true
   }else{
    console.error('用户名、密码不能为空');
    return false;
   }
 }
}

4、声明周期中的不同点

beforeUnmount() {//vue2.x中beforeDestroy
  
}
unmounted() {//vue2.x中destroyed
  
}
activated() {
 console.log('keep-alive缓存的组件激活时调用')
}
deactivated() {
 console.log('keep-alive缓存的组件停用时调用')
}

5、防抖

6、mixin混入

let baseMixin = {
 data() {
  return {
   api:'http://www.baid.com'
  }
 },
 methods: {
  success() {
   console.log('成功')
  }
 }
}
export default {
 mixins:[baseMixin]
}

以上可以进行全局配置

7、teleport的用法

<teleport to="body"></teleport>//表示将teleport内包含的内容显示到body中

有时候我们想把模板的内容移动到当前组件之外的DOM，这个时候就可以使用Teleport

8、ref和reactive的使用

import {ref} from 'vue'
export default {
 setup() {
 //ref reactive定义响应式数据
 let title = ref('我是一个标题');
 let userInfo = reactive({
  username:'张三',
  age: 20
 })
 //获取reactive里面定义的数据
 let getUserName = () =>{
   alert(userInfo.username)
 }
 //获取ref里面定义的数据
 let getTitle = () =>{
   alert(title.value)
 }
  //设置reactive里面定义的数据
 let setUserName = () =>{
   userInfo.username = '李四';
 }
 //设置ref里面定义的数据
 let setTitle = () =>{
   title.value = '修改后的ref里面的title'
 }
 return {
  title,
  userInfo,
  getUserName,
  getTitle
 }
 }
}

ref：用来定义字符串、布尔类型、数组、数值

reactive：用来定义对象类型

9、toRefs–解构响应式对象数据

把一个响应式对象转化成普通对象，该普通对象的每个property都是一个ref，和响应式对象property–对应

import {toRefs,reactive} from 'vue'
setup() {
 let article = reactive({
  dec:'我是一条新闻',
  type:'娱乐新闻'
 })
 return {
 ...article,//错误写法会导致article失去响应式
 ...toRefs(article)
 }
}

10、计算属性

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

11、readonly"深层"的只读代理

传入一个对象（响应式或者普通）或ref，返回一个原始对象的只读代理，一个只读代理是”深层的“，对象内部的任何嵌套的属性项都是只读的。

12、watch与watchEffect区别

watch:

懒执行，也就是说仅在监听的源变更时才执行回调

更明确哪些状态的改变会触发监听器重新运行

访问监听器变化前后的值

import{toRefs,reactive.watchEffect,watch} from 'vue'
export default {
 props:['msg']
 setup(props) {
  console.log(props);
  let data = reactive({
   num : 1
  })
  watchEffect(() =>{
   console.log(`num的${data.num}`)
  })
  watch(data, (newData,oldData) =>{
   console.log('data.num=' + data.num);
   console.log(newData,oldData)
  })
  setInterval(()=>{
   data.num ++;
  },1000)
  return {
   ...toRefs(data)
  }
 }
}

13、provide和reject的用法

import {ref,provide} from 'vue'
export default {
 setup() {
  let title = ref('app跟组件里面的title')；
  provide('title',title)
  return{
   title
  }
 }
}

j接收页面

import{inject} from 'vue'
export default {
 setup() {
  let title = inject('title');
  return {
   title
  }
 }
}