vue3学习 2.组合API

1.vue2的老旧模式

在这里插入图片描述
数据放在data里面 但是操作数据的方法可能在methods或者computed或者watch里面 分开操作有点不合适

2.vue3中新增setup方法
setup函数时组合API的入口函数
<template>
    <div>
        <p>{{count}}</p>
        <button @click="myFn">按钮</button>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  components: {
  },
  setup(){
      //定义了一个名称焦作count变量,这个变量的初始值是0
      //这个变量发生改变之后,vue会自动更新UI
      let count = ref(0)
      //在组合API中 如果想定义方法不用定义到methods里直接定义就能用(但是要暴露出去)
      function myFn(){
        //   alert(11)
        console.log(count.value)
        count.value++
      }
      //注意点:
      //组合API中定义的变量/方法,要想在外面使用 必须通过return {xxx,xxx}暴露出去
      return{count,myFn}
  },
}
</script>

在这里插入图片描述

3 vue2和vue3关于数据和方法的对比

在这里插入图片描述

4 setup()函数的执行时机和注意点
1,setup函数执行时机
	执行顺序
	setup:先执行 然后再是reforeCreate和created
	beforeCreate:表示组件刚刚被创建出来,组件的data和methods还没有初始化好
	created:主键刚刚被创建出来,并且组件的data和methods已经初始化好了
2,setup注意点
	执行setup的时候还没有执行created生命周期.
	这里因为data和methods还没有初始化好所以调用不到data和methods里面的数据和方法
	由于我们不能再setup函数中使用data和methods,
	所以vue为了避免我们错误的使用,他直接将setup函数中this修改成了undefined
	setup函数只能是同步的 不能是异步的 
5 reactive和reactive的注意点
1,什么是reactive?
	reactive是vue3中提供的实现响应式数据的方法
	在vue2中响应式数据是通过defineProperty来实现的
	而在vue3中响应式数据是通过ES6的Proxy来实现的
2.reactive注意点:
	reactive参数必须是对象(json/arr)  (如果穿进去的是个字符串 则对数据进行不了操作)
	如果给reactive传递了其他对象 (其他对象如  new Date())
	+默认情况下修改对象,界面不会自动更新
	+如果想更新,可以通过重新赋值的方式

在这里插入图片描述

6 什么是ref
1.什么是ref?
	-ref和reactive一样,也是用来实现响应式数据的方法.
	-由于reactive必须传递一个对象,所以导致在企业开发中
	 如果我们只想让某个变量实现响应式的时候会非常麻烦
	 所以vue3就给我们提供了ref方法,实现对简单值的监听
2.ref本质:
	-ref底层的本质其实还是reactive
	 系统会自动根据我们给ref传入的值将它转换成
	 ref(xx) -> reactive({value:xx})
3.ref注意点:
	-在vue中使用ref 的值不用通过value获取
	-在JS中使用ref的值必须通过value获取

在这里插入图片描述在这里插入图片描述

7.ref和refactive的区别
1,ref和reactive的区别:
	如果在template里面使用的是ref类型的数据,那么vue就会自动帮我们添加.value属性
	如果在template里面使用的是reactive类型的数据,那么vue就不会自动帮我们添加.value属性
	vue通过自带的__v_isRef:true这个属性来判断是不是ref类型
2.vue是如何决定是否需要自动添加.value的?
	vue在解析数据之前,会自动判断这个数据是否是ref类型的
	如果是就自动添加.value.如果不是就不添加.value
3.vue是如何判断当前数据是否是ref类型的?
	通过当前数据的__v_isRef来判断
	如果有这个私有的属性,并且取值为true,那么就代表是一个ref类型的数据
4.我们自己可以通过isRef,isReactive来判断是不是ref属性数据(返回值为true或者false来判断是那种类型)

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
4

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js是一种流行的JavaScript框架,用于构建用户界面。它采用了组件化的开发方式,使得前端开发更加模块化和可维护。目前,Vue.js有两个主要版本:Vue 2和Vue 3。 Vue 2是目前广泛使用的版本,它具有以下特点: 1. 响应式数据绑定:Vue 2使用了双向数据绑定的机制,可以实时更新视图和数据的变化。 2. 组件化开发:Vue 2支持组件化开发,可以将页面拆分成多个独立的组件,提高代码的可复用性和可维护性。 3. 虚拟DOM:Vue 2使用虚拟DOM来提高渲染性能,通过比较虚拟DOM的差异来最小化实际DOM操作的次数。 4. 插件系统:Vue 2提供了丰富的插件系统,可以方便地扩展Vue的功能。 Vue 3是Vue.js的最新版本,它在Vue 2的基础上进行了一些重大改进: 1. 更快的渲染性能:Vue 3对虚拟DOM进行了优化,提高了渲染性能。 2. 更小的包体积:Vue 3采用了模块化的设计,可以按需引入功能,减小了包体积。 3. Composition APIVue 3引入了Composition API,提供了更灵活和可组合的代码组织方式。 4. 更好的TypeScript支持:Vue 3对TypeScript的支持更加友好,提供了更准确的类型推断和类型检查。 关于Vue的其他问题,你可以提问如下: 1. Vue.js是什么? 2. Vue.js有哪些特点? 3. Vue.js的优势是什么? 4. Vue.js与其他前端框架的比较有哪些? 5. 如何开始学习Vue.js? 6. Vue.js的生命周期是什么? 7. Vue.js中的指令有哪些? 8. Vue.js中的组件通信方式有哪些? 9. Vue.js中的路由是怎么使用的? 10. Vue.js中的状态管理是什么?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值