一、 vue3和vue2的区别
- api的区别
vue2：
export default {
data() {},
methods:{},
watch:{},
mounted() {},
computed:{},
filters:{},
components:{},
directives:{}
}
vue3
import {ref,computed,onMounted} from 'vue'
setup() {
const num=ref(0)
const str=ref('你好！')
num.value++
computed(()=>{
..........
})
}
- vue3底层用的typescript语言编写,vue2用JavaScript实现
- vue3双向绑定proxy和vue2(Object.defineProperty)不同
- .......
vue3最初开发的目的：实现代码关注点分离，代码几何级数增长带来的可维护问题
二、vue3核心语法
2.1 组合式api
-
ref
通常定义基本类型或数组类型的变量或常量
-
例如：
import {ref} from 'vue' let num = ref(10); let str = ref('hello world') let arr = ref([{ id: 1, name: 'jack' }, { id: 2, name: 'alice' }]) -
如何操作dom[通常vue很少操作dom]
-
给dom定义ref名称
<button ref="btn" @click="changeValue">修改值</button>< -
定义一个ref常量
//定义dom操作对象 const btn = ref(null) -
然后通过常量.value.style.css属性名
btn.value.style.width='300px'
-
-
reactive
reactive主要用于复杂对象类型
-
例如：
//定义用户信息 const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], })
-
toRef
可以将reactive定义的响应式对象中的某个属性单独提取成ref定义的形式
-
例如：
const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], }) const mingzi=toRef(obj,'username') 模板: {{ mingzi }}
-
toRefs
可以将reactive定义的对象属性全部提取出来转换成ref形式
-
例如：
//定义用户信息，reactive主要用于复杂对象类型 const obj = reactive({ username: '张三', age: 20, address: '北京', hobby: ['音乐', '刷抖音'], }) //toRefs const {username,age,address,hobby}=toRefs(obj) -
computed
可以将ref，reative定义的变量或常量，通过计算属性生成一个新的可响应式的值(ref)
-
例如：
//计算属性 const total = computed(() => { let res = 0; arr.value.forEach(item => { res+=item.num }) return res })
通常computed只能读取(默认支持get)，不能修改，如果想修改，必须通过set方式
例如：
const fullname = computed({ get: () => { return firstname.value+lastname.value }, set: (val) => { firstname.value = val[0] lastname.value=val.slice(1) } }) -
watch
数据改变时，才监听数据的变化
-
例如：
//监听ref //watch(监听目标,回调) watch(firstname, (newV, oldV) => { console.log('新值：',newV) console.log('旧值:', oldV) }) //监听reactive watch(()=>obj.username, (newV,oldV) => { console.log('obj.username新值：',newV) console.log('obj.username旧值:', oldV) })
-
watchEffect
进行页面立即触发监听
-
例如：
watchEffect(() => { console.log('进入立马监听：',firstname.value) })
-
nextTick
- 由于数据改变，dom并未更新，如果要拿到dom更新之后的结果，需要通过nextTick来解决
- 应用场景：
- 商品列表滚动
- 数据更新，要对dom做一些操作时使用
