【Vue3】知识点总结

vue3基础知识点总结以及vue2和vue3的对比不同点

---

1、项目创建

vue3项目创建和vue2一样，可以使用脚手架，也可以使用script标签直接引用，
还可以直接使用npm手动构建
vue3中基本向下兼容所有vue2语法

---

2、vue3和vue2区别

2.1 启动方式不同

vue2是通过new关键字创建实例
vue3是通过createApp方法创建实例

//vue2
new Vue({
     router,
     store,
     render:h=>h(App)
}).$mount("#app")

//vue3
var app=createApp(App)
app.use(store).use(router).mount('#app')

2.2 全局数据不同

vue2是通过prototype定义全局数据

vue.prototype.$http=axios

vue3是通过config.globalProperties 定义全局数据

app.config.globalProperties.$http=axios

2.3 全局数据不同

vue2中，模板标签下有且只能有一个根元素
vue3中，不限制根元素数量

3、组合式api->setup

vue3的代码内容基本都在setup里面 （生命周期，计算，监听，方法…）
setup是vue3最先执行的函数
setup 没有this
组合式api 更接近原生js 写法更直观
按需引入 为了优化项目性能

setup参数

setup可以接收参数
prop是用于接收参数，如父组件向子组件传递的参数，url传递参数等
context是上下文数据
.attrs 是接收参数
.emit 是用于发送事件
.slot 插槽
.expose 暴露公共属性

4、定义数据

ref

通过ref可以在setup中定义一个基本类型数据，字符串，数字等

reactive

通过reactive可以在setup中定义一个引用类型数据，数组，对象等

// 先引入 ref  和 reactive
import { ref,reactive} from 'vue'

setup(){
     // 使用ref定义一个数字
    const num=ref(5)    
    // 如果在setup内部访问或修改ref的数据 应该访问或修改这个数据的value值
    
    num.value=10
  
     // 使用reactive定义一个数组
    const list=reactive([
{id:1,title:"vue"},
{id:2,title:"小程序"},
{id:3,title:"react"},
{id:4,title:"uniapp"},
    ])
}

// setup中出现的内容 外部想要访问需要return出去
return {num,list}

为什么要用ref和reactive定义数据？

因为ref和reactive定义的数据可以实现数据双向绑定

5、计算属性

作用和vue2中计算属性一样

// 先引入计算属性
import { computed } from 'vue'
setup(){
    // 计算属性
    const msg = ref('hello my name is vue3.0')
    const rmsg = computed(()=>{
      return msg.value.split('').reverse().join('')
    })
}

6、监听属性

作用和vue2中监听属性一样

// 监听属性 参数：要监听的数据  回调函数：新数据 旧数据
// 监听方法的返回值是个方法  可以停止这个监听方法
const obj = reactive({
  n:5
})
// 如果监听的数据是个引用类型 不需要特别定义深度监听 无法监听旧数据
const stop = watch(obj,(nval,oval)=>{
  console.log('count由'+oval.n+'变成了'+nval.n)
})

7、生命周期

在setup中没有 beforcreate 和 created 两个生命周期
setup函数可以替代 beforcreate 和 created

// 挂载完成后
onMounted()
// 数据更新后
onUpdated()
// 组件卸载后
onUnmounted()
// 挂载前
onBeforeMount()
// 更新前
onBeforeUpdate()
// 卸载前
onBeforeUnmount()
// 抓取到错误时触发
// onErrorCaptured()
// 当组件渲染过程中追踪到响应式依赖时调用
// onRenderTracked()
// 当响应式依赖的变更触发了组件渲染时调用
// onRenderTriggered()
// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
// onActivated()
// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
// onDeactivated()
// 在组件实例在服务器上被渲染之前调用
// onServerPrefetch()

8、获取dom节点

1、先定义一个null的数据
	let elm=ref(null)
2、在模板中声明节点
	<div ref="elm"></div>
3、在mounted生命周期后获取dom节点
	console.log(elm.value)

---