vue2和vue3的区别
vue2和vue3的区别1.vue2中的options API(选项型API) 和vue3中的composition API(合成型API)在options API中,将代码分割成不同的属性,例如data,methods,computed,watch,生命周期函数。而在composition API中,可以用方法来分割代码,这样相对于旧的分组方式会更整洁。在vue2中,在data声明后可以使用而v
vue2和vue3的区别
1.vue2中的options API(选项型API) 和vue3中的composition API(合成型API)
在options API中,将代码分割成不同的属性,例如data,methods,computed,watch,生命周期函数。
而在composition API中,可以用方法来分割代码,这样相对于旧的分组方式会更整洁。
在vue2中,在data声明后可以使用
而vue3中,需要在setup方法里面声明,且此方法在组件初始化构造时触发。
为了能在vue3中操作data,可以使用【反应API,即 reactivity API】,在组件中的声明方法如下:
从vue中引入reactive=>在setup中使用reactive()声明数据为响应性数据,并return变量名,之后即可在templete中使用。
import { reactive } from 'vue'
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
return { state }
}
}
2.vue3 setup函数中没有this
3.vue2在data中声明变量,vue3在setup中用ref声明常量,reactive声明变量,return出来
4.vue2在methods声明方法,vue3在setup中声明,将login return出来
setup () {
const login = () => {
// 登陆方法
}
return {
login
}
}
5.vue2的生命周期函数可以直接声明,vue3中需要放在setup生命周期中
setup(){
onMounted(async ()=>{
let res = await Get('/user/account')
console.log(res)
})
return{
}
},
6.vue2计算属性用computed,vue3计算属性在setup中和变量一起调用
setup () {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
// ...
}
7.vue2和vue3最大的区别是接受组件props的参数传递
在vue2中,this代表的是当前组件,不是某一个特定的属性。可以直接使用this访问props属性值。
methods:{
getvalue(){
console.log(this.value)
}
}
但是在vue3中,this无法直接拿到props属性,emit event(触发事件),和组件内的其他属性。
但是全新的setup函数可以接受两个参数 props和context,其中,props可以接受多种数据类型,attrs只能接受String类型。
props要先声名才能取值,若未声明则指都在context.attrs
//在父组件中
<template>
<p> 注册界面</p>
<son size='small' count='' disabled />
</template>
<script>
import son from './../components/son.vue'
export default {
components:{
son
},
}
</script>
<style>
</style>
//在子组件中
<template>
<p>子页面</p>
</template>
<script>
import { h, ref, reactive } from 'vue'
export default {
props:{
size:String,
count:Number
},
setup(props,context) {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
console.log(props.size)
console.log('props:',{
...props
})
console.log('attrs:',{
...context.attrs
})
// Please note that we need to explicitly expose ref value here
return () => h('div', ['DOM元素为函数:',readersNumber.value, book.title])
//this
//在 setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。
//这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
}
}
</script>
最终的打印结果为
8.在vue2中只有一个根节点,而在vue3中可以存在多个根节点
在vue2中可以直接在data中取数据
而在vue3中 反应数据(Reactive Data)是包含在一个反应状态(Reactive state)变量中,所以我们需要访问这个反应状态来获取数据值。
<template>
<div class='form-element'>
<h2> {{ state.title }} </h2>
<input
type='text'
v-model='state.username'
placeholder='Username'
/>
<input
type='password'
v-model='state.password'
placeholder='Password'
/>
<button @click='login'>
Submit
</button>
<p>
Values: {{ state.username + ' ' + state.password }}
</p>
</div>
</template>
9.子组件向父组件传axios请求结果的值
//子组件
setup(props, {emit}) {
onBeforeMount(async () => {
//调用方法
let res = await tGet("/wx_login");
console.log(res.config.baseURL + res.config.url);
emit('url', {
url: res.config.baseURL + res.config.url,
})
})
//在 setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。
//这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
},
//父组件
<son @url='url' />
setup(){
//在vue3中常量不能再次赋值,也无法改变,不能用state1判断状态
// const state1 = ref(0)
const url1 = reactive({param1:'',state1:'0'})
function url(param){
console.log('父组件拿到的emit值',param)
url1.param1 = param.url
}
return{
url,
url1
}
}
10.toRefs和:v-model一样,不能动态改变
setup(){
//在vue3中常量不能再次赋值
// const state1 = ref(0)
const url1 = reactive({param1:'',state1:'0'})
function url(param){
console.log('父组件拿到的emit值',param)
url1.param1 = param.url
if(url1.param1!=''){
url1.state1='1'
const data = toRefs(reactive({param1:'',state1:'0'}))
console.log(data)
console.log(data.param1.value)
return () => h("div", ["DOM元素为函数:"]);
}
}
return{
url,
url1
}
}
//上图拿到param之后,url1.param1已经有值了。
//但是重新用toRefs声明之后,声明什么就是什么,不会响应式改变。
更多推荐
所有评论(0)