开源html5 网站模板,wordpress 绑定熊掌号,如何看网站几级域名,主网站怎么做熊掌号优化vue2与vue3的区别
vue2属于选项式API,vue3属于组合式API
setup概述
setup是vue3中一个新的配置项,值是一个函数,组件中所用到的数据,方法,计算属性,监视等等,均配置在setup中 vue3中的setup和vue2的data,methods之间有什么关系呢? 因为setup比data解析的早,所以在data中可以…vue2与vue3的区别
vue2属于选项式API,vue3属于组合式API
setup概述
setup是vue3中一个新的配置项,值是一个函数,组件中所用到的数据,方法,计算属性,监视等等,均配置在setup中 vue3中的setup和vue2的data,methods之间有什么关系呢? 因为setup比data解析的早,所以在data中可以读到setup中的数据,但是要用this指向 如果两者有冲突的话,优先于setup setup语法糖
将setup写在script里面则不用返回所定义的变量和函数
ref 定义基本类型的数据响应式变化 let 属性名 ref(值) 形成一个refImpl实例对象object.defineProperty()内部的get,set进行实现 使用ref进行响应式数据的时候,数据要从value中捞取 ref也可以包裹复杂数据类型 reactive定义对象类型的数据响应式变化 reactive定义对象类型的数据变化 使用reactive定义时要修改对象中的全部属性,需要使用Object.assign(对象1,对象2) 表示将对象2中的数据全都赋给对象1 而使用ref定义的对象类型的数据可以直接赋值 区别reactive替换整体时地址并未发生变化而是将对象二中的属性值分别赋值给对象一中的属性 ref替换整体时采用字面量的方式进行赋值改变了原先的地址 vue2与vue3响应式数据的区别 vue2响应数据原理 vue2通过object.defineproperty()给每个数据都添加一个set与get用于对数据的读取与修改 但是在对象和数组中通过索引值或者直接添加删除的方式并不能进行响应数据页面变化 原因因为object.defineproperty()中的set与get只控制数据的读取和修改对于新增和删除并不理会所以当我们通过索引值或.的方式添加数据时不会更新页面因为新添加的数据并没有get与set函数删除也是同理 vue3响应数据原理 vue3很好的解决了vue2所出现的问题使用proxy对象进行代理数据给数据整体加上get与set并且有对应的deleteProperty方法用于数据的删除get管理数据的读取set管理数据的修改与新增完全实现了数据的响应式变化 底层是通过Reflect反射对象使用getset与deleteProperty对源数据进行操作 Reflect不会阻塞代码的正常运行不会报错成功返回true失败返回false但是通过object.defineProperty()添加的数据会阻塞代码往下运行 使用原则 1.若需要一个基本类型的响应式数据,必须使用ref 2.若需要一个响应式对象,层级不深,ref,reactive都可以 3.若需要一个响应式对象,且层级较深,推荐使用reactive 4.ref定义的对象类型实现响应式原理底层还是借助了reactive中的proxy来实现 computed
const 变量名 computed(() {return 需要计算的过程
})在vue2中我们都已经知道方法和计算属性的区别 方法需要调用才执行可以实现和计算属性一样的效果但是唯一不同是计算属性有缓存方法并没有计算属性是当它所依赖的数据发生改变的时候才会重新计算而方法会在每次调用的时候就触发 计算属性一般用来通过已有的属性计算出一个新的属性默认是只读的通过get函数读取 当你试图修改通过计算属性得得到的值时会收到一个警告当需要修改计算属性值时计算属性可以变为可修改的需要在里面配置一个set函数用于接收修改后的值 注意计算属性的意义是由其他值来派生出另一个值重点是进行计算的过程和返回结果值要避免在其中参杂其他的逻辑(修改DOM异步请求) const 变量名 computed({// getter 用于读取get() {return },// setter 用于修改set(newValue) {}
})watch
作用监视数据的变化 watch本质是一个函数 第一个参数要监视的对象或属性 第二个参数是一个回调函数参数为newValue,oldValue 第三个参数可以配置例如开启深度监视或者一上来就监视一次 特点Vue3中的watch只能监视以下四种数据 1.ref定义的数据 2.reactive定义的数据 3.函数返回一个值getter函数 4.一个包含上述内容的数组 watch监视返回值本质上是一个函数当需要解除监视时直接调用该函数即可 监视ref定义的基本类型数据
import {reactive, toRefs,ref,watch} from vue
let sum ref(0)watch(sum,(newValue,oldValue){if(newValue 200){//操作逻辑}
})
const changeSum (){sum.value 100
}监视ref定义的对象类型的基本数据 1.当使用ref定义对象类型时监视整体时默认监视的是person的地址值只有当person里的值全都变化了才可以监视的到 若是需要某一个值变化就能监测到需要开启深度监视但是这时新旧值都显示为新值因为对象中的一个值改变了并未引发地址的改变还是原来的对象 const person ref( {name:hangsan,age:10
})const changeName (){
person.value.name -
console.log(person.value.name);
}
const changeAge (){
person.value.age 1
}
const changeALL (){
person.value {name:lisi,age:111} // 直接通过字面量赋值的方式修改地址变化了
}
watch(person,(newValue,oldValue){ console.log(newValue,oldValue,2);
},{deep:true})2.当使用reactive定义对象数据类型的数据时会隐式地创建一个深层侦听器监视时默认开启深度监视即对象中的一个值变化就会触发监视 const person reactive( {name:hangsan,age:10
})const changeName (){
person.name -
console.log(person.name);
}
const changeAge (){
person.age 1
}
const changeALL (){
Object.assign(person,{name:wasa,age:12}) //里面值都变了但是地址并未变化
}
watch(()person.name,(newValue,oldValue){console.log(newValue,oldValue,1);
})
watch(person,(newValue,oldValue){ console.log(newValue,oldValue,2); //newValue,oldValue两者的值相同因为他们是一个对象地址未变
})监视ref或者reactive定义的对象类型中的某一个属性
const person reactive( {name:hangsan,age:10
})const changeName (){
person.name -
console.log(person.name);
}
const changeAge (){
person.age 1
}
const changeALL (){
Object.assign(person,{name:wasa,age:12})
}
watch(()person.name,(newValue,oldValue){console.log(newValue,oldValue,1);
})当监视ref或者reactive定义的对象类型中的某一个值时watch函数的第一个参数为监视的值不能直接写对象.属性名 因为此时获取的是对象中的一个数据值并不符合watch所监视的四种情况中的一种 这时需要使用get函数来返回所要监视的对象中的属性值 若该属性不是对象类型则需要写成get函数 若该属性是对象类型 可直接写若直接写当整个对象发生变化时监测不到因为watch监测的只是原对象当整体改变时相当于原对象已经不存在了换成了另一个全新的对象 也可写成函数式不会出现上述情况 监视多个属性
// 多个来源组成的数组
watch([x, () y.value], ([newX, newY][oldX, oldY]) {console.log(x is ${newX} and y is ${newY})
})当监视多个时使用数组包裹只要有一个数据变化时会触发监视newValue和oldValue值相同且都为数组 watchEffect
let sum ref(0)
let count ref(20)
//使用watch监视属性当达到某个限制时实现相应逻辑watch([sum,count],(value){ let [sum,count] valueif(sum40){console.log(111);}
})
//使用watchEffect监视属性当达到某个限制时实现相应逻辑
watchEffect((){if(sum.value 40 || count.value 40){console.log(111);}
})
const changeSum (){sum.value 20
}
const changeCount (){count.value 10
}watchEffect会自动在逻辑中识别所要监视的属性不用再像watch那样再标明所要监视的属性 ref
加在html标签上可以获取当前的DOM元素 但是加在组件身上获取的是一个组件实例并不会看到这个组件身上的东西产生保护机制 若想看到组件要暴露defineExposedefineExpose({想给别人看的属性}) 这样父组件调用的时候才能看到这些属性
hook钩子函数 hook 本质是一个函数把setup函数中使用的Composition API进行了封装 其实是将vue中的数据与方法进行进一步模块化将一个功能的数据与方法放到同一个文件中,类似于vue2中的minxin 命名使用use与功能名进行拼接文件内使用函数包裹功能向外界暴露函数内将其数据与函数return出 在主文件中引入使用hook暴露出的函数,让代码的逻辑更加清楚易懂 toRef 作用将响应式对象中的指定属性值包装成为一个ref响应式数据该响应式数据的值指向先前对象中的值 语法const 属性名 toRef(对象名‘属性名’) 应用将对象中的值单独提供给外部使用时可以实现原对象的 数据与新包装成的ref数据的联动响应 let person reactive({name:zhangsan,age:11
})
let age toRef(person,age)
let name toRef(person,name)const updateName (){name.value _
}
const updateAge (){age.value _
}对象数据类型的响应式原理是依靠proxy来实现的通过内部的get与set函数来实现对数据的读取和修改实现数据与页面的一致当使用toRef()将对象中的数据转化为ref实例对象时实例对象的get与set会指向原对象的get与set,当原对象中该属性值发生变化时该实例对象也会发生变化同理实例对象发生变化时原对象也会发生变化从而会实现了两个数据的同步 toRefs toRefs和toRef作用一样不同点是前者将对象中的每一个都创建为了ref对象后者是有选择的 适用于多个使用对象中的数据的场景 let person reactive({name:zhangsan,age:11
})
let { name,age} toRefs(person)
const updateName (){name.value _
}
const updateAge (){age.value _
}
console.log(name,age);toRaw与markRow toRaw: 作用:将一个由reactive生成的响应式对象转为普通对象。 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。 markRaw: 作用:标记一个对象,使其永远不会再成为响应式对象。 应用场景: 1.有些值不应被设置为响应式的,例如复杂的第三方类库等。 2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。 vue2vue3difference vue2中父组件通过props向子组件传递数据但当子组件不接收时就将数据暂时储存在$attrs上,当子组件使用props接收时就将数据挂载在组件实例身上 setup函数的执行时机比beforeCreated还要早this为undefined,所有vue3中不存在this setup函数接收两个参数props和context props外部传递过来的数据且组件声明接收过的放在props上 context:attrs:外部组件传递过来数据但组件没有声明接收的会放在这里和vue2$attrs一样 emit:给子组件绑定自定义事件必须在子组件中使用emits声明下绑定的是什么事件相当于vue2$emits slots:插槽具名插槽需要用v-slot:名字,$slots
