环境搭建
尤大开发了一个项目构建工具vite
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
创建实例
之前是new Vue({})的形式来创建实例，vue3添加了一个新的方法--->creatApp
import {createApp} from 'vue'
const app =createApp({})
////////////////////////
import {
createApp
} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
<template>
<!-- 可以有多个节点 -->
<h1>hello world</h1>
<h1>x:{{ position.x }} y:{{ position.y }}</h1>
</template>
<script>
import { reactive } from 'vue';
// import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
// components: {
// HelloWorld
// },
setup() { //数据入口
let position = reactive({}); //构建响应式对象
window.addEventListener('mousemove', e => {
position.x = e.pageX;
position.y = e.pageY;
// console.log(position);
});
return { position }; //最后要暴露出这个数据
}
};
</script>
选项式api 与 组合式api
解决逻辑关注点分散的问题
vue2：选项式api，
vue3 ：组合式api,写在setup()中，setup中没有this
export default {
name: 'App',
// components: {
// HelloWorld
// },
setup() { //数据入口
console.log('setup中的this为',this) //输出： setup中的this为 undefined
let position = reactive({}); //构建响应式对象
window.addEventListener('mousemove', e => {
position.x = e.pageX;
position.y = e.pageY;
// console.log(position);
});
return { position }; //最后要暴露出这个数据
}
};
ref
创建一个响应式变量
const time = ref(0); //创建值类型的变量 number string
reactive
vue2中存在一个Vue.observable方法，用来返回一个可响应的对象，在vue2中，data函数返回一个对象，vue内部会用Vue.observable 来处理
const position = reactive({
//创建响应对象
x: 0,
y: 0,
info: computed(() => {
return `当前位置在 X: ${position.x} Y:${position.y}`;
})
});
toRef
可以用来为源响应式对象上的 property 性创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。
const state = reactive({
foo: 1,
bar: 2
})
//三种方式创建变量
const fooToRef = toRef(state, "foo"); // fooToRef++ 可以响应，state.foo同台改变
const fooRef = ref(state.foo); //无现象 stata不变
let foo = state.foo;//无现象 stata不变
通过上面的小测试可以看到，toRef是将变量与响应式对象建立引用关系，变量改变时可以改变源响应对象
toRefs
参考地址
作用：让props中的值变成响应式的
传入的props是响应式的，会实时更新，传递给setup就能直接使用
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
每次调用props中的属性都需要用 props.[属性名]的形式，书写复杂，考虑到es6的解构赋值
但是使用es6解构会消除prop的响应性，所以使用toRefs来简化写法
props:{
user:{
type:String
}
}
import{toRefs} 'vue'
const { user } = toRefs(props)
watch
参考
watchEffect
占坑
生命周期
| 选项式 API | Hook inside setup |
|---|---|
beforeCreate |
Not needed* |
created |
Not needed* |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeUnmount |
onBeforeUnmount |
unmounted |
onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
