signed

QiShunwang

“诚信为本、客户至上”

vue3新特性

2021/6/3 18:25:52   来源:

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(()=>{})