vue3新特性

vue3移除API

1：$on移除 vue3默认不支持eventBus模式

2：filter 语法 vue3直接移除{{msg}} methods替换

3：.sync 基于prop双向绑定 v-model

 

对比vue2选项式和vue3组合式API区别

1：选项式功能的实现是分割的   不在一起的 组合式功能的实现是分块的

2：物理层面 可以按照功能抽离成一个一个的函数 然后再组合起来

3：逻辑层面 setup 组合式API对逻辑复用更加优化

 

 

steup

1：组件中所有组合式API的入口

2：在breforeCreate钩子函数之前执行

3：不能使用this this执行的不是当前组件实例对象 this指向undefined（重点）

4：setup函数只会在组件初始化的时候执行一次 在beforeCreate生命周期钩子执行之前执行

 

响应式方法 reactive

1：可执行的函数 需要从vue框架中导入

2：可执行函数的时候 传入一个对象 函数返回值是一个响应式的代理对象

3：如果响应式对象数据想要在模板使用 必须显示的return出去 return {响应的对象}

<template>
  <div>{{ state.name }}</div>
  <div>{{ state.age }}</div>
  <div @click="modifyFn">改值</div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    //响应式数据
    const state = reactive({
      name: "小明",
      age: "0",
    });
    const modifyFn = () => {
      state.name = "小";
      state.age = "00";
    };
    return {
      state,
      modifyFn,
    };
  },
};
</script>

 

 

响应式方法 ref函数

1：可执行的函数 传如简单类型或是复杂类型 返回一个响应式的代理对象

2：ref函数生成的响应式数据如果想要在模板中使用必须return return {响应式数据 }

3：在模板中vue 可以省略 .value直接使用

3：在setup函数中如果想要获取由ref函数生成的响应式数据 必须通过.value才能拿到

4：需要从vue框架中导入

<template>
  <div v-if="flag" style="width:100px;height:100px;backgroundColor:#000"></div>
  <button @click="closeFn">关闭</button>
  <button @click="kqFn">开启</button>
</template>

<script>
import {ref} from 'vue'
export default {
setup(){
  const flag = ref(true)
  function closeFn(){
    flag.value=false
  }
  function kqFn(){
    flag.value=true
  }
  return {
    flag,
    closeFn,
    kqFn
  }
}
}
</script>

注意：不管是响应式数据还是回调函数 只要想在模板中使用必须return

 

reactive和ref函数都可以提供响应式数据的转换 推荐使用ref

确定对象都有哪些字段 用reactive

 

 

computed

1:机制 基于一个已知属性经过一定的计算得到一个全新的属性

2：默认情况只有get(访问时执行)

3：computed({

//获取值

get(){

},

//赋值

set(val){

}

 

})

 

toRefs

1：可执行的函数 接收一个响应式对象的传入(reactive)

2：简化我们reactive生成响应式数据在模板中需要通过点语法才能访问

3：注意：如果使用reactive生成的响应式对象 将这个对象结构或者展开 会让数据失去响应式的能力，使用toRefs函数 可以保证该对象展开的每个属性都是响应式的

setup() {
    //响应式数据
    const state = reactive({
      name: "小明",
      age: "0",
    });
   
    return {
      ...toRefs(state)
    };
  },

顶层组件 底层组件（相对而言）传值 provide inject

顶层组件

provide('key',value) 

底层组件

inject('key')

key不可以重复

传递数据类型简单类型和复杂类型

setup(){
  const data = ref('组件')
  provide('data',data)
}
}

setup(){
        const data = inject('data')
        return {
            data
        }
    }

 

模板ref的使用

1：ref 普通dom标签 获取真实dom对象

2：ref 组件标签 获取组件标签实例对象

3：ref v-for获取由dom对象（实例对象）组成的数组 不经常使用

 

ref获取真实的dom元素

1:setup函数中调用 const dom = ref(null)

2:在模板区域 在标签或组件上 防止一个ref="dom"

3:setup 通过dom.value 可以拿到一个真实的dom元素对象或者是组件实例对象

 

vue2 中的data(){return {数据}} 数据放在函数中return的原因 在复用的时候 每次执行函数都会返回一个开辟了新的内存空间的对象 虽然初始值一样 但是互不影响 

 

watch监听器

参数：返回监听的数据 数据变化执行的回调 {深度监听，立即执行 页面一打开执行}

注意：最好不要使用深度监听 可以精确到属性

<template>
  <div>{{age}}</div>
  <button @click="age=2"></button>
</template>

<script>
import {ref,watch} from 'vue'
export default {
 setup(){
   const age=ref(0)
   
   watch(
     ()=>{ return age.value},
     ()=>{
       console.log('age变化了');
     },
     {
        immediate:true,//立即执行
     }
   )
   return {
     age
   }
 }
}
</script>

 

生命周期钩子函数

1：从vue导入以on开头的生命周期钩子函数

2：钩子函数可以执行多次

onMounted(()=>{})

onMounted(()=>{})

onMounted(()=>{})