echarts自适应大小

 myChart.setOption(option)window.onresize = function () {myChart.resize()}

setup在create之前，所有变量方法都要return。

function btn() {}

或者

const btn = () =>{}

二、组合式API（常用）

1.import { ref } from 'vue

当ref的值发生改变时，视图层会自动更新。

const name = ref('班海斌')

function btn() {

name.value = '韦艳迎'

}

2. import { reactive } from 'vue

为值创建响应式引用
定义基本普通数据类型不能用reactive，用ref
reactive主要定义复杂数据类型，如数组、对象
可相应深层次的数据，如多维数组
reactive返回一个响应式的proxy对象

function btn() {

name = '韦艳迎'

}

3. import { toRef } from 'vue

响应式数据

ref的本质是复制粘贴一份数据，脱离了与原数据的交互

ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据，但是会更新视图层

toRef的本质是引用，与原数据有交互，修改响应式数据会影响到原数据，但不会更新视图层

toRef接受两个参数（要操作的对象、对象的某个属性）

4. import { toRefs } from 'vue

用于批量设置多个数据为响应式数据

toRefs与原数据有交互，修改响应式数据会影响到原数据，但不会更新视图层

toRefs还可以与其他响应式数据交互，更加方便处理视图数据

setup() {

const obj = { name: '班海斌'， age: 18, sex: '男'}

const newObject = reactive(obj)

return { ...torefs(newObject) }

}

5.computed,监听数据变化; import { computed } from 'vue

总和:<input type='number' v-model="sum"/>

setup() {

const age1 = ‘ ’

const age2 = ' '

const res = reactive( { age1, age2 })

const sum = computed( () =>{

return age1 + age2

})

return { ...torefs(res), sum }

}

6.watch,监听数据变化; import { watch } from 'vue

setup() {

const num1 = ref(0)

const num3 = reactive( {

name : '班海斌'，

age： { num： 1}

})

// 监听一个

watch( num1, ( newVal, oldVal ) = > {

console.log( newVal, oldVal )

})

// 监听多个

watch( [num1, num2], ( newVal, oldVal ) = > {

console.log( newVal, oldVal )

})

// 监听整个reactive响应数据变化，只能监听到最新的结果newVal=oldVal

watch( num3, ( newVal, oldVal ) = > {

console.log( newVal, oldVal )

})

// 监听reactive响应数据中某一个值的变化

watch( () => num3.age.num, ( newVal, oldVal ) = > {

console.log( newVal, oldVal )

}, { immediate: true } ) // { immediate: true } ,进入页面立即开启监听

return { num1，num3}

}

7.watchEffect,监听数据变化; import { watchEffect } from 'vue

watchEffect如果存在的话，在组件初始化的时候就会执行一次收集依赖

watchEffect拿不到新值和旧值

watchEffect不需要指定监听的属性，他会自动收集依赖，只要我们回调中引用到了响应式的属性

那么当这些属性变更的时候，这个回调都会执行，而watch只能监听指定的属性而做出变更。

setup() {

const p1= ref(0)

const res = watchEffect( () => {

const a = p1.value

})

res() // 停止数据监听

}

8.shallowRef和shallowReactive

shallowRef只处理基本类型数据

shallowReactive只处理第一层数据，对象第一层数据

const p1 = shallowReactive({

name: '班海斌'，

age: {

num: 0

}

})

三、组件传值

1.普通页面传值

父：

setup() {

const p1 = reactive( { name: '班海斌'，age: 18})

provide( 'name', p1) // 传值

return { p1 }

}

子：

setup() {

const p1 = inject( ‘name') //接收传值

return { p1 }

}

2.点击给子组件传值

<button @click="btn">点击传值给父组件</button》

父组件：

setup() {

const tableRef = ref()

const p1 = reactive( { name: '班海斌'，age: 18})

function btn () {

tableRef.value.myChild( p1 )

}

return{ tableRef, p1, btn }

}

子组件：

setup（） {

function myChild(val) {}

return { myChild }

}

getCurrentInstance()

1、概述：一个很重要的方法，获取当前组件的实例、上下文来操作router和vuex等。
2、使用：由vue提供，按需引入：import { getCurrentInstance} from 'vue';

import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;

例如：

ctx.$notify.success({ title: '成功', message: '导出成功' })

props（为组件的props），context（包含attrs；emit；slots三个组件的property）

setup(props,context){

}

1、扩展：父组件通过属性传的值在子组件中的各个部分的获取：
①：props：通过父传子的方式直接获取到值
②：setup(props, context){} 方法中的props只能拿到选项props中已经定义的属性；
③：setup(props, { attrs, emit, slots}){} 方法中的attrs只能拿到未在选项props中定义的属性；
④：通过{ proxy } = getCurrentInstance(); proxy.attrs也只能拿到未在选项props中定义的属性；
2、context：非响应式的对象；包含了组件暴露的三个property：
context.attrs：传入组件中但是未被props接收的对象。
context.emit：用于触发当前组件实例上的传值事件。
context.slots：用来访问被插槽分发的内容（一般用于使用渲染函数来书写一个组件时）

Vue3.x中重写的v-model

用例：Vue3.x重写了v-model的实现方式，以适用用绑定多个v-model
①：单个数据实现数据双向绑定

<my-components v-model="msg"></my-components>
// 等价于
<my-components :modelValue="msg" @update:modelValue="value=$event"></my-components>// myComponents组件中接收绑定数据和触发数据改变
props: { modelValue: String }; // 获取数据
setup(props, { emit }) {emit('update:modelValue', 'newValue'); // 触发事件并传值
};

②：多个数据实现数据双向绑定

<my-components v-model:msg="msg" v-model:name="name"></my-components>
// 等价于
<my-components :msg="msg" @update:msg="value=$event" :name="name" @update:name="name=$event"></my-components>// myComponents组件中接收绑定数据和触发数据改变
props: { msg: String, name: String }; // 获取数据
setup(props, { emit }) {emit('update:msg', 'newValue'); // 触发事件并传值emit('update:name', 'newValue'); // 触发事件并传值
};

插槽修改

vue2写法
<div slot="footer"><el-button size="small" @click="cancelBtn()">取 消</el-button><el-button size="small" type="primary" @click="confirmSubmit">确 定</el-button>
</div>vue3写法<template #footer><div><el-button size="small" @click="cancelBtn()">取 消</el-button><el-button size="small" type="primary" @click="confirmSubmit">确 定</el-button></div></template>

vue3 Watch 更新

watch(() => props.cloudTipsMessage,  //监听对象(newValue, oldValue) => {if (newValue === '视频') {reactiveData.fileMap = ['.mp4']reactiveData.tipsMessage = '.mp4'} else if (newValue === '音频') {reactiveData.fileMap = ['.mp3']reactiveData.tipsMessage = '.mp3'} else if (newValue === 'PDF') {reactiveData.fileMap = ['.pdf']reactiveData.tipsMessage = '.pdf'} else if (newValue === '文档') {reactiveData.fileMap = ['.xls', '.xlsx', '.doc', '.docx', '.ppt', '.pptx']reactiveData.tipsMessage = '.xls,.xlsx,.doc,.docx,.ppt,.pptx'}},{deep: true // 深度监听的参数}
)

使用echarts

按需引用，并且挂载方式和vue2（var myChart = this.$echarts.init(this.$refs['pieChart'])）有点差别，

不再使用this.$echarts,并且按需引入

<template><div id="pieChart" style="width: 100%; height: 400px" />
</template><script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'const props = defineProps({courseData: { type: Array, default: () => [] },legendData: { type: Array, default: () => [] },courseTotal: { type: Number, default: 0 }
})
onMounted(() => {drawPie()
})
function drawPie() {var myChart = echarts.init(document.getElementById('pieChart'))var option = {tooltip: {trigger: 'item',formatter: '{b}: {c} ({d}%)'},color: ['#3AA0FF', '#4DCB73', '#ee6f3d', '#FAAD14', '#42c7df'], // 饼图颜色legend: {orient: 'vertical',right: 40,bottom: 30,data: props.legendData},series: [{name: '总课程数', // 配置formatter时候会用到(就是{a})type: 'pie',radius: ['45%', '66%'], // 配置饼图和环图的内圆和外圆的大小center: ['40%', '50%'], // 配置图形的位置,前面一个是x轴,后面一个是y轴,'50%'代表是水平居中avoidLabelOverlap: false,label: {show: false,position: 'center',fontSize: '16',fontWeight: 'bold',formatter: `{a}\n${props.courseTotal}`},data: props.courseData}]}// 设置成功myChart.setOption(option)window.onresize = function () {myChart.resize()}
}
</script><style scoped>
</style>

引入Treeselect

import Treeselect from 'vue3-treeselect'
import 'vue3-treeselect/dist/vue3-treeselect.css'

不再是vue2中的（按照vue2引入会报错）

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

vue2升级vue3知识点相关推荐

手摸手带你玩转Vue3——Vue2升级Vue3
今年年初,尤大大公布了一个重磅消息,将Vue3作为Vue的默认版本. 这无疑不是对我们开发人员的内卷煽风点火! vue默认版本改动意味着,官方将会把Vue研发重心放到vue3上,vue2也开始走下坡路 ...
Vue2 大型项目升级 Vue3 详细经验总结
前言前段时间,公司准备在现有的 Vue2 项目中做一个聊天系统,但考虑开发聊天系统的周期并不短,客户又急需.于是准备对接腾讯的 IM 组件,来实现. 不知道的这里贴个官网: IM TUIKit 官方 ...
vue2和vue3的区别（由浅入深）
前言 vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力,可以 ...
Vue2与Vue3 setup的使用差异与对比
最近一直在做vue2的技术栈升级,于是心血来潮,就想要不写篇文章总结一下vue2和vue3在使用上的不同吧,于是乎,我们这就开始吧! 首先说明一下,vue3有多种写法,本文使用setup语法糖,不考虑 ...
Vue2 环境下安装Vue3 ，同一台电脑同时安装vue2 和vue3
目前大多数老的项目还是以vue2.0版本为主,在vue3的环境下vue2的项目又不能运行,因此Vue2 和Vue3两个版本同时存在显得尤为重要,本博客为转发博客,非常详细博客1:https://bl ...
vue2升级到 Vue3的异同（入门须知）
vue2升级到Vue3的异同构建项目不一样, 具体查看构建项目 main.js 的不一样 vue2 中的mian.js 里面导入的是vue 实例, vue 3中的main.js 如下的结构: 注意 ...
说一说实战项目升级从vue2到vue3 之main.js 区别
相信很多人都对尤大口中的vue3蠢蠢欲动许久了,但是很多人就是一头雾水没法下手,不知道改怎么搞,或者怕项目升级报错什么的. 我自己的成功的把项目进行升级了,所以想简单记录一下. 简而言之首先就是版本嘛 ...
持续不断更新中... 自己整理的一些前端知识点以及前端面试题，包括vue2，vue3，js，ts，css，微信小程序等
Vue3自考题 1,如何使用vue3的组合式api 答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 2,computed 与各个watch之 ...
整理的一些 Vue3 知识点，初学者看完就能上手做项目
点击上方关注前端技术江湖,一起学习,天天进步看完你就基本可以上手搞开发了,本文适合Vue初学者,或者Vue2迁移者,当然还是建议Vue3官网完全过一遍.不适合精通原理,源码的大佬们. 先推荐两个v ...

vue2升级vue3知识点

二、组合式API（常用）

三、组件传值

getCurrentInstance()

Vue3.x中重写的v-model

插槽修改

vue3 Watch 更新

使用echarts

引入Treeselect

vue2升级vue3知识点相关推荐

最新文章

热门文章