前端学习--Vue3.0(1)

1使用create-vue搭建Vue3项目

1.1 认识create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite（下一代前端工具链），为开发提供极速响应

create-vue基于vite

vue-cli基于webpack

1.2 创建项目

需要16.0及以上的node.js 

npm init vue@latest 创建项目

 npm i 安装依赖包

npm run dev 运行项目

打开浏览器输入地址得到：

 1.3 熟悉项目目录

2 组合式API

2.1 setup选项

        --组合式API的入口

执行时机：优先于beforeCreate()

setup语法糖

        --更简易的写法

2.2 reactive和ref

reactive()

接受对象类型数据的参数传入并返回一个响应式的对象

ref()

接收简单类型或者对象类型的数据传入并返回一个响应式的对象

2.3 计算属性函数computed()

2.4 watch函数

侦听单个数据

侦听多个数据变化

immediate参数

数据创建时首先执行一次

watch(count, (newval, oldval) => {
  console.log('count变化了')
},{
  immediate:true
})

deep参数

watch监听的ref对象默认浅层侦听，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

deep会产生性能损耗，不推荐开启 

其实我觉得直接用reactive声明对象不就行了嘛...

精确侦听对象中某个属性变化

3 生命周期函数

 onBeforeMount()

beforeMount()

在这一步中，根元素还不存在。在选项API中，可以使用this.$els来访问

// 选项 API
export default {
   beforeMount() {
     console.log(this.$el)
   }
 }

onBeforeMount()

在组合API中，没有this，必须在根元素上使用ref，此时输出为null

// 组合 API
 

onMounted()

在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问

在 选项API中，我们可以使用this.$el来访问我们的DOM，在组合API中，我们需要使用refs来访问Vue生命周期钩子中的DOM。

onBeforeUpdate()&onUpdated()

beforeUpdate()&updated()

onBeforeUpdate()&onUpdated()

参考：(99条消息) Vue 3 生命周期完整指南_vue3生命周期_@大迁世界的博客-CSDN博客

4 父子通信

4.1 父传子

father.vue

son.vue

4.2 子传父

son.vue

father.vue

5 模板引用

通过ref标识获取真实的dom对象或者组件实例对象

defineExpose()

默认情况下在

son.vue

grandson.vue

跨层传递方法