百度网站优化指南,形象墙设计,外贸谷歌推广,苏州的建筑公司网站1.Vue3概述
Vue3的API由Vue2的选项式API改为了组合式API。但是#xff0c;也是Vue2中的选项式API也是兼容的。 2.创建Vue3项目
create-vue 是 Vue 官方新的脚手架工具#xff0c;底层切换到了 vite。使用create-vue创建项目的步骤如下#xff1a;
安装 create-vue
npm i…1.Vue3概述
Vue3的API由Vue2的选项式API改为了组合式API。但是也是Vue2中的选项式API也是兼容的。 2.创建Vue3项目
create-vue 是 Vue 官方新的脚手架工具底层切换到了 vite。使用create-vue创建项目的步骤如下
安装 create-vue
npm init vuelatest 项目中关键文件的含义 3.组合式API
3.1.setup选项
setup 函数是在 beforeCreate 钩子之前执行。并且在setup函数中写的数据和方法需要在末尾以对象的方式 return才能给模版使用。
scriptexport default {setup(){const message this is messageconst logMessage (){console.log(message)}// 必须return才可以return {message,logMessage}}}
/script
也可以给 script 标签添加 setup 标记这样 script 标签内部所有的代码相当于都是在 setup 函数内导出语句也会被默认添加上。
script setupconst message this is messageconst logMessage (){console.log(message)}
/script
3.2.reactive和ref函数
reactive用来接受对象类型数据的传入并返回一个响应式的对象。
script setup// 导入import { reactive } from vue// 执行函数 传入参数 变量接收const state reactive({msg:this is msg})const setSate (){// 修改数据更新视图state.msg this is new msg}
/scripttemplate{{ state.msg }}button clicksetStatechange msg/button
/template
ref接收简单类型或者对象类型的数据传入并返回一个响应式的对象。基本用的都是这种。
script setup// 导入import { ref } from vue// 执行函数 传入参数 变量接收const count ref(0)const setCount (){// 修改数据更新视图必须加上.valuecount.value}
/scripttemplatebutton clicksetCount{{count}}/button
/template
3.3.computed
会基于现有的数据计算出来的新属性。依赖的数据发生了变化计算属性也会自动重新计算。
script setup
// 导入
import {ref, computed } from vue
// 原始数据
const count ref(0)
// 计算属性
const doubleCount computed(()count.value * 2)// 原始数据
const list ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList computed(() {return list.value.filter(item item 2)
})
/script
3.4.watch
侦听一个或者多个数据的变化数据变化时执行回调函数俩个额外参数 immediate控制立刻执行deep开启深度侦听。
1.侦听单个数据
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})})
/script
2.侦听多个数据
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)const name ref(cp)// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName]){console.log(count或者name变化了[newCount, newName],[oldCount,oldName])})
/script
3.immediate和deep参数
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})},{immediate: true, // 侦听器创建出来之后立即执行一次deep: true // watch默认是浅层监听对象内部的属性发生变化时不会触发开启deep后即可监听内部属性})
/script
3.5.生命周期函数
1.选项式对比组合式 2.生命周期函数的使用
scirpt setup
// 1.导入生命周期函数
import { onMounted } from vue
// 2.定义生命周期函数编写自定义逻辑
onMounted((){// 自定义逻辑
})
/script
相同的生命周期函数可以定义多个会按照定义的顺序执行
scirpt setup
import { onMounted } from vue
onMounted((){// 自定义逻辑
})onMounted((){// 自定义逻辑
})
/script
3.6.父子组件的通信
1.父传子 2.子传父 3.7.模版引用
script setup
import { ref } from vue
// 1.调用ref函数得到ref对象
const h1Ref ref(null)
/scripttemplate!--- 2.通过ref标识绑定ref对象 --h1 refh1Ref我是dom标签/h1
/template
3.8.defineExpose
默认情况下在 script setup 语法糖下组件内部的属性和方法是不开放给父组件访问的可以通过 defineExpose 编译宏指定哪些属性和方法容许访问。 3.9.provide和inject
