vue3基础知识

vue3基础模板创建

vue创建组件对象使用createApp()进行创建

const app = Vue.createApp({

setup(){

setup里面可以写基本上所有的东西

声明一个响应式数据需要

  let num = Vue.ref(30)

声明过后需要导出才能使用

return {num}

}

}).mount("#app")

vue3支持两种写法

选项式API：data methods computed 都是配置项，这就是选项式API（但是不推荐这样使用）

组合式API：vue3新增的一个setup函数，这个函数是组合式API的入口函数，vue3建议把所有数据和逻辑放在setup函数里面。setup同时也是一个声明周期函数vue3新增的，setup可以替代beforeCreate和created。

setup函数在创建之前被调用所以this指向window平时调用直接调用就行

vue3声明响应式数据

定义响应式数据方式

Vue.ref()方法主要对基本数据类型，返回的是基本数据类型，在js中使用的时候用age.value渲染的时候直接age

2、引用类型的数Vue.reactive进行定义和ref的区别是reactive定义的不用通过value访问而是直接obj.name

声明的数据和函数都要通过return导出才能使用

return {

num,f1,obj,aarr

}

proxy属性代理

proxy是es6新特性，可以理解为在目标对象之前架设一层拦截外面访问的时候需要通过这层拦截，可以对外界的访问进行过滤和修改

var obj = {
name:'张三‘，

age:20

}

创建obj对象的代理对象，通过proxy类创建一个代理对象

参数1代理的原始对象  参数2代理的配置对象（可以在里面写一些操作）

     var proxyObj = new Proxy(obj, {})

 var proxyObj2 = new Proxy(obj, {

            // 1 target:原始对象

            // 2 key  对哪个属性进行拦截操作

            // 3 value 属性值

            // 4 receive可选对象代理对象

            set(target, key, value, receive) {

                target[key] = value + '----英国干的'

            },

            // 1 target 原始对象

            // 2 key 获取的哪个属性的属性值

            // 3 receive 代理对象

            get(target, key, receive) {

                return target[kry]

            }

        })

      proxyObj2.name = '北溪燃气管被爆破，欧洲天然气被断供是谁嘎的'

        console.log(obj);

数据绑定式原理

 v2和v3响应式原理区别？

v2的响应式原理：对象类型通过objectProperty()对属性进行读取、修改进行拦截（数据劫持），对数组类型，通过重写更新数组的一些列方法实现拦截

存在问题：新增属性删除属性界面不会更新，需要使用this.$set  this.$delete等强制更新的方法，直接修改数组的下标 界面也是不会更新

优点：基于es5，支持大部分浏览器

缺点：由于对象是通过递归实现监听，如果数据层级过多，导致初始化的时候时间过长，不支持数组的监听，对象新增的key也是无法监听，通过数组下标进行访问的，也是无法触发响应式

 

v3响应式

基本数据类型通过ref实现响应式，引用类型通过reactive实现响应式，可以拦截对象中任意操作的变化，包括属性读写，属性添加，属性删除。以及数组下标的修改

优点:速度比较快，不用初始化使用深度递归。可以检查到代理对象的属性动态的添加和删除也可以检查到数组下标和length属性的改变

缺点：es6新增的API 对于一些低版本浏览器不支持如IE11

vue3声明周期函数

vue3生命周期函数两种写法

第一种和vue2写法一样直接写

第二种写法写在setup里面（因为setup在组件创建之前调用所以不需要beforeCreate和created这两个生命周期函数）ajax请求可以直接写在这里

参数是一个回调函数，回调函数才是生命周期函数

Vue.onBeforeMount(()=>{}）

Vue.onMuouted(()=>{})

Vue.onBeforeUpdate(()=>{})

Vue.onUpdated(()=>{})

Vue.onBeforeUnmount(()=>{})

Vue.onMounted(()=>{})

vue2中的beforeDestroy和destroyed在vue3中被废弃了

vue3中的计算结果

var all = Vue.computed(()=>{

var sum = 0

cars.forEach(item=>{

sum+=item.price

});

return sum

})

最后再return出来就可以调用了

retuen {all}}

vue3中监听器

vue3中监听器有两种写法

第一种监听任意响应式数据的变化

    Vue.watch(count, (a, b) => {

                    console.log("count", a, b);  //1,0

     })

第二种监听一个对象或者数组中某一个值的变化

  Vue.watch(()=>arr[0],(a,b)=>{

                    console.log('arr2',a,b); // 1，0

    })

监听目标是基本类型和引用类型的区别