vue2和vue3不同写法及区别
-响应式原理不同,vue2原理基础依靠 Object.defineProperty;--写法却别:vue写法共有组合式和选项式两种写法,vue2主要使用。--vue2不支持多根节点,vue3支持多根节点。--vue2和vue3双向数据绑定不同。--vue2和vue3定义数据方法不同。--diff算法不同,vue3更优化。--vue2和vue3生命周期不同。--vue2和vue3插槽不同。2.写法不
·
一、vue2和vue3写法及区别:
--写法却别:vue写法共有组合式和选项式两种写法,vue2主要使用选项式写法,vue3主要使用组合式写法;vue2只支持选项式写法 ,vue3同时支持选项式和组合式写法。
--vue2和vue3双向数据绑定不同
--vue2和vue3生命周期不同
--vue2和vue3定义数据方法不同
--vue2和vue3插槽不同
--vue2不支持多根节点,vue3支持多根节点
--响应式原理不同,vue2原理基础依靠 Object.defineProperty;vue3原理基础依靠Proxy
--diff算法不同,vue3更优化
二、写法不同,写法详解。
选项式API写法(vue2和vue3都支持)
<template>
<!-- 此标签内主要写html -->
<div class="box" @click="getbtn"></div>
</template>
<script> //script标签写vue语法
export default { //此标签意为导出vue模块
data(){ //data为vue常用字段,主要用来定义数据和变量,用this来调用定义的数据和变量
return {
btn: 1, // 定义一个数据 ,通过上方设置点击事件,在methods中用this.btn调用
}
},
created(){ //生命周期,组件创建时调用方法
},
methods:{ //mthods主要来写方法
getbtn(){
console.log(this.btn); // 1
}
},
watch:{ //监听时使用(多个影响一个)
}
}
</script>
<style>
/* 此标签内主要写css样式 */
.box{
width: 10px;
}
</style>
组合式API写法(两种写法,只有vue3支持)
第一种:组合式写法
<template>
<!-- 写html -->
<div @click="shdg"> {{ data }}</div>
</template>
<script >
import {ref,reactive} from 'vue'
export default {
setup(){ //组合式关键setup
let data=ref('蔡徐坤') //定义数据和变量,js中调用需value,模板中不需
let das=reactive('鸡坤') //只能定义对象类型数据,js和模板中调用都不需要调用value
let shdg=()=>{ //点击事件
console.log(data.value); //蔡徐坤
console.log(das); //鸡坤
}
return{ //重要,定义的变量和方法都要return 出去
data,
das,
shdg
}
}
}
</script>
<style>
/* 写css样式 */
</style>
第二种:组合式写法(常用:简洁,方便)
<template>
<!-- 写html -->
<div @click="shdg"> {{ data }}</div>
</template>
<script setup> //组合式关键setup
import { ref, reactive } from 'vue'
let data = ref('蔡徐坤') //定义数据和变量,js中调用需value,模板中不需
let das = reactive('鸡坤') //只能定义对象类型数据,js和模板中调用都不需要调用value
let shdg = () => { //点击事件
console.log(data.value); //蔡徐坤
console.log(das); //鸡坤
}
</script>
<style>
/* 写css样式 */
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)