Vue3.0创建项目及API讲解（一）

1.项目创建1.检查vue-cli脚手架版本（vue-V），更新低版本（npminstall@vue/cli-g）2.创建项目（vuecreatevue3test）选择default（直接回车），初始化项目3、进入项目文件夹，更新vue版本（vueaddvue-next）4、运行项目（npmrunserve）5、访问on浏览器（http://localhost:8081），初始化页面显示2.Vue3APIVue3主要是一个低侵入、函数式的API，需要使用的函数必须提前引入。例如：导入ref函数：import{ref}from'vue'1.setup函数返回一个对象，该对象的属性会合并到组件模板的渲染上下文中。所有其他导入的函数必须在其中执行。创建一个组件实例，然后初始化props，然后调用setup函数。从生命周期钩子来看，会在beforeCreate钩子之前调用import{ref}from'vue'exportdefault{setup(){letnum=ref(333)letstr=ref('ffff');让onChange=()=>{num.value=9999;}return{num,str,onChange}}}(2)、reactive接收一个普通对象然后返回普通对象的响应式代理。(3)、computed传入一个getter函数，返回一个ref对象，默认不能手动修改。点击按钮时，proNum不变，浏览器会提示'Writeoperationfailed:computedvalueisreadonly'import{ref,computed}from'vue'exportdefault{setup(){constnum=ref(1)constproNum=computed({set:(val)=>{num.value=val+10;},get:()=>num.value})让onChange=()=>{proNum.value=10;console.log(num)}return{num,onChange}}}(4)、readonly传入一个对象（reactive或normal）或ref，返回原对象的只读代理。只读代理是“深”的，对象内的任何嵌套属性也是只读的。点击按钮，浏览器提示'Setoperationonkey'value'failed:targetisreadonly'(5)、watch需要监听特定的数据源，在回调函数中执行sideeffects。默认是惰性执行，也就是只在监听的数据源发生变化时才执行回调。(6)、watchEffect立即执行一个传入的函数，响应式地跟踪它的依赖关系，改变依赖关系时重新运行函数3.生命周期钩子函数2.x版本生命周期对应的组合APIbeforeCreate->使用setup()created->使用setup()beforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeDestroy->onBeforeUnmountdestroyed->onUnmounted这些生命周期钩子注册函数只能在setup()期间同步使用，因为它们依赖于内部全局状态来定位当前组件实例（正在调用setup()的组件实例），在没有当前组件的情况下调用这些函数将引发错误。组件实例上下文也是在生命周期钩子的同步执行过程中设置的，所以当组件被卸载时，生命周期钩子内部同步创建的监听器和计算状态也会被自动移除。欢迎关注公众号（网络学习吧），一起学习进步：