vue3入门笔记—2022年1月9日 -凯发ag旗舰厅登录网址下载

1. 响应式值（ref和reactive）

一般：

1、ref用于单个值，

2、reactive用于对象类型的数据。

例如:

const name = ref("zhangsan") const user = reactive({'name': 'zhangsan','age': 18 }) // 当用ref去封装对象类型的数据时，数据发生变化，watch函数监听不到， // 而reactive函数可以监控的到watch(user,(newval)=>{// 输出新的值console.log('newval:' , newval); })const refuser = ref({'name': 'zhangsan','age': 18 })watch(refuser,(newval)=>{// 输出新的值( 这个没办法被监控到 )console.log('newval:' , newval); })

虽然表面上看上去ref和reactive修饰的值都可以发生改变，但是实际ref修饰的值的变化并么有被监控到。

ref和reactive在获取值时候的区别：

const nameref = ref("zhangsan") const namereactive = reactive("zhangsan")// ref需要添加.value // 而reactive不要 console.log(nameref.value) console.log(namereactive)

2. composition api (组合式api)

通过组合式api，替代以前的：

export default{data:{},methods:{},computed:{} }// 所有的参数写在option中 // 不利于写大项目，你会上上下下来回跳（写过vue项目的都懂，写着写着就得去找methods在哪） // 找对应的参数的位置会浪费很多不必要的时间

如果你坚持使用上面的书写方式，当代码量上去后，你会在data,methods,computed…之间来回跳。

上面是vue凯发ag旗舰厅登录网址下载官网中原话，可以作为证明。

尤大大也意识到这个问题，所以才引入了composition api。

composition api ：

import {computed,ref,reactive} from "vue" export default{setup(){// 需要特别注意：// setup函数中的this是undefined// 该函数执行在beforecreate和created生命周期函数之前function funcname(){// 直接写就行，不需要methods属性里面写}let data = reactive({name: 'zhangsan',age: 18,addage: computed(()=>data.age1) // 计算属性})return {data,funcname}}}

3. setup函数

setup函数中的this是undefined
该函数执行在beforecreate和created生命周期函数之前

无法通过this.xxx, 访问属性

setup(props)

props参数可以用于接收来自父组件的参数 （需通过props属性接收）

context（上下文）中内容非常多：

父组件： 子组件： props: {// 显示说明属性one: {type: string,},two: string,},setup(props, context) {console.log('🚀 ~ file: subcomp.vue ~ line 14 ~ setup ~ context', context)console.log('🚀 ~ file: subcomp.vue ~ line 14 ~ setup ~ props', props)}, // 触发父组件中的事件 context.emit('myclick', '子组件向父组件传输消息')// 父组件：

同时context可以直接采用es6中的解构

setup(props,{attrs,emit,refs}){// 采用解构的方式的话就不用 context.xxx// 直接采用下面方式即可：emit()attrs.xxxrefs.xxx }

补充：

使用vuecli创建项目意料之外的bug。

self.xhr.send(payload); // 注释掉这行代码就行。

可参考这篇文章解决：https://www.cnblogs.com/axu8080/p/15217284.html

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue3入门笔记—2022年1月9日的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。