Vue3 选项式的状态选项

已于 2023-08-31 14:22:55 修改
阅读量107 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
于 2023-07-26 15:26:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxl1527431101/article/details/131940295
版权

Vue3 选项式的状态选项

1.data 声明组件初始响应式状态的函数

  1. 作用：声明初始变量
  2. data必须使用函数返回对象的方式存储数据。因为这种方式每次调用都会返回一个新的数据对象，如果data写成对象形式，不同组件会使用同一个data(共用一个引用地址)，导致数据混乱
  3. 调用：data内的数据可以直接在标签中使用 {{ }} 调用
  • 示例
	<div id="app">
        <div>{{userName}}</div>
    </div>

	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    userName: '张三'
                }
            }
        })
        app.mount('#app')
    </script>

2. methods 声明要混入到组件实例中的方法

  1. 作用：声明方法
  2. methods是一个对象，存储该组件的方法
  3. 调用： 在标签上使用 @事件='方法'
  • 示例
	<div id="app">
        <div @click="fn">{{userName}}</div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    userName: '张三'
                }
            },
            methods: {
                fn() {
                    this.userName = '李四'
                }
            }
        })
        app.mount('#app')
    </script>

3. computed 计算属性

  1. 作用：基于现有数据通过一些计算得出一个新的数据，用于到模板中使用

  2. 写法：对象形式，
    • key值是计算属性的名字，
    • value值是一个对象，对象中包含一个get函数(必需)和一个set函数(选需)，函数返回值作为该计算属性的值

  3. 调用：computed内的数据可以直接在标签中使用 {{ }} 调用

  4. 特点：
    (1) 计算属性只读，不可修改
    (2) 有缓存，get函数默认只执行一次，返回值会缓存起来，后续多次调用同一个计算属性不会触发get函数的多次执行，而是使用上一次执行的缓存结果
    (3) 计算属性与函数的区别：计算属性有缓存，性能更优秀。

  5. get函数：
    (1) 默认执行一次
    (2) 需要有返回值，返回值的内容就是计算属性的值
    (3) 函数内使用到数据会作为该计算属性的一个依赖项，当依赖项发生变化时，该get函数会重新执行，最终计算属性的值也会跟着变化
    (4) 不能有副作用，不能写异步逻辑，不能操作DOM，不能改变外部的其他数据


    6.set函数：
    • 当计算属性发生变化后触发，可以间接改变外部数据
  • 示例
	<div id="app">
        <div>{{userName}}</div>
        <div>姓：{{cutName}}</div>
        <div @click="cutName = '李四'">修改</div>
    </div>
    
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    userName: '张三'
                }
            },
            computed: {
                cutName: {
                    get() {
                        console.log(1111);
                        return this.userName[0]
                    },
                    set(value) {
                        this.userName = '王五' 
                    },
                }
            }
        })
        app.mount('#app')
    </script>

4. watch 侦听器

  1. 作用：在状态变化时执行对应操作
  2. 写法：
    (1) 函数式：多用于监听变量或对象的某个属性。监听变量时，函数名要和监听的变量名相同；监听对象的某个属性时，函数名为"对象名.属性名"。
    (2) 对象式：用于监听变量或对象(也可以是对象的某个属性)。key名要和监听的对象名(变量名、"对象名.属性名")相同，
    • value值为一个对象，handler函数(用于监听新旧数据)
    • immediate: true 开启加载自动触发一次
    • deep: true 开始深度监听(如果监听对象，只有开启深度监听才能监听对象内的属性值变化)
  3. handler函数特点：
    (1) 有两个参数(newVal:改变后的值, oldVal:改变前的值)
    (2) 函数式无法默认触发，只有对象式中设置了immediate: true 才会开启,(函数式无法默认触发)
    (3) 监听对象时，无法监听深层数据的改变，如果需要深层监听，需要设置deep: true ,(函数式无法深层监听)
    (4) 该函数可以做异步操作、修改DOM、修改外部其他数据
    (5) 该函数不需要返回值
  • 示例
	<div id="app">
        <div>userName：{{userName}}</div>
        <div>name：{{name.xing}}{{name.ming}}</div>
        <button @click="userName = '李四'">修改变量userName</button>
        <button @click="name.xing = '王'">修改变量userName.xing</button>
        <button @click="name.ming = '五'">修改变量userName.ming</button>
    </div>

	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    userName: '张三',
                    name: {
                        xing: '赵',
                        ming: '六'
                    }
                }
            },
            watch: {

                //监听普通变量的值
                userName(newVal, oldVal) {
                    console.log(111, newVal, oldVal);
                },

                //监听对象中的某个属性值
                'name.xing'(newVal, oldVal) {
                    console.log(222, newVal, oldVal);
                },

                //无法直接监听对象(方法二)，必须开启深度监听，对象的属性值改变才能触发
                name: {
                    handler(newVal, oldVal) {
                        console.log(333, newVal, oldVal);
                    },

                    // immediate: true, // 默认触发一次
                    deep: true,      // 启用深度监听
                }
            }
        })
        app.mount('#app')
    </script>

5. components 局部注册组件

  1. 作用：局部注册子组件
  2. 写法：对象式，
    • key是组件名，用<组件名>调用，不能有大写字母
    • value是组件实例
  3. 特点：只能在当前组件使用注册的子组件
  • 示例
	<div id="app">
        <firstchild></firstchild>
        <secondchilld></secondchilld>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        const secondChilld = {
            //子组件模板
            template: `<div>全局注册</div>`
        }

        const app = Vue.createApp({
            //局部注册子组件
            components: {
                //key是组件名，用<组件名>调用，不能有大写字母
                //value是组件实例
                firstchild: {
                    //子组件模板
                    template: `<div>局部注册</div>`
                }
            },
        })

        //全局注册子组件
        //参数一：组件名，用<组件名>调用，不能有大写字母
        //参数二：组件实例
        app.component('secondchilld', secondChilld)
        app.mount('#app')
    </script>

6. props 声明接收父组件传递的参数

  1. 作用：声明接收父组件传递的参数，
  2. 写法：
    • 数组形式接收参数：只能声明接收的参数，不能声明参数的数据类型
    • 对象形式接收参数：可以声明接收的参数，可以声明对传入的 props 的校验要求
  3. 特点：
    • 父组件传递的参数只有在props中声明，才能在子组件中调用，调用方式和data相同
    • 接收到的参数与声明的props校验要求不符时，浏览器不报错，但会警告
  • 示例
<div id="app">
	<!-- 标签上的属性会传递到子组件上 -->
    <!-- 属性值可以是基本数据类型、引用数据类型、动态属性(使用v-bin绑定一个变量) -->
	<firstchild name1="张三" age1="18"></firstchild>
	<secondchild name2="李四" age2="20"></secondchild>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
	const app = Vue.createApp({
	//注册子组件
	components: {
		firstchild: {
			//子组件模板
			template: `<div>欢迎，{{ name1 }} - {{ age1 }}</div>`,
			//Props 声明，用于接收父组件传递过来的参数
			//数组形式接收props
			props: ["name1", "age1"],
			//挂载完成函数钩子
			mounted() {
				console.log('数组形式接收props', this.name1 + '：' + this.age1);
			},
		},
		secondchild: {
			//子组件模板
			template: `<div>欢迎，{{ name2 }} - {{ age2 }}</div>`,
			//对象形式接收props
			props: {
				//key:接收的属性名,value：期望接收到的属性值的类型
				//接收到的属性值的类型和期望接收到的属性值的类型不符，浏览器不会报错，只会警告
				'name2': String,
				'age2': Number
			},
			//挂载完成函数钩子
			mounted() {
				console.log('对象形式接收props', this.name2 + '：' + this.age2);
			},
		}
	}
});

app.mount("#app");
</script>
  1. props校验
    • 只有对象形式接收父组件参数才能声明对传入的 props 的校验要求
  • 示例
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    
    // 多种可能的类型
    propB: [String, Number],
    
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true  //必传
    },
    
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100  //默认值
    },
    
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    
    // 自定义类型校验函数
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    
    // 函数类型的默认值
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个
      // 工厂函数。这会是一个用来作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }

7. emits

田七三两
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现选项卡及选项卡切换效果
08-27
在JavaScript文件中，我们可以使用Vue的实例来管理选项卡的状态。例如，我们可以使用tabsSwitch函数来切换选项卡，并使用isActive属性来标记当前激活的选项卡。同时，我们还可以使用watch函数来监听选项卡的变化，并...
VUE3 数据的侦听
热门推荐
m0_49515138的博客
12-09 1万+
所以要想定义的 watch 能够做出预期的行为，数据源必须具备响应性或者是一个 getter ，如果只是通过 let 定义一个普通变量，然后去改变这个变量的值，这样是无法侦听的。什么情况下可能会用到批量侦听呢？这个 API 的类型如下，使用的时候需要传入一个副作用函数（相当于 watch 的 侦听后的回调函数 ），也可以根据的实际情况传入一些可选的 侦听选项。来到这里，对 2 个必传的参数都有一定的了解了，先看看基础的用法，也就是日常最常编写的方案，只需要先关注前 2 个必传的参数。这句话是什么意思呢？
VUE之状态管理（VUEX）
cyy13579的博客
09-06 1079
1、state:存储状态。也就是变量。 2、getters:派生状态。也就是set、get中的get，有两个参数：state、getter分别可以获取state中的变量和其他的getters，外部调用方式为store.getters.personinfo().就和vue的computed(计算属性)差不多。 3、mutations:提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作，第一个参数是state，第二个参数是要修改的
vue中tab选项卡的实现思路
10-17
在Vue.js中，实现Tab选项卡是一个常见的需求，它用于展示和切换不同的内容区域。本文将详细介绍如何在Vue中创建一个基本的Tab组件，并探讨其核心思路和应用场景。 首先，让我们看看主要的应用场景： 1. 不同注册和...
vue+element tabs选项卡分页效果
10-16
此外，为了在切换选项卡时保持分页状态，我们可以将分页信息（如当前页码和每页大小）与选项卡的`name`属性关联。当选项卡改变时，可以根据`activeName`值来恢复之前的分页设置。 总的来说，这个示例展示了如何使用...
vue插件tab选项卡使用小结
09-01
5. `tabClassName` 和 `tabActiveClassName`: 分别是普通状态和激活状态的选项卡类名，用于设置样式。 在组件的`<template>`部分，我们可以看到`<div class="component-tab">`内的`v-for`循环，用于渲染每个选项卡...
el-checkbox 状态不更新
bao
08-13 178
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
vue 实现上浮气泡效果
m0_68964998的博客
08-13 130
1.用 li 来做每个气泡。
【vue教程】五. Vue 的路由管理
最新发布
前端探索者
08-13 539
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
Vue3使用el-table实现多级表头合并列
weixin_72439307的博客
08-07 371
el-table多级表头合并列
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 413
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
weixin_44784401的博客
08-09 866
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
Element-plus中的el-input无法输入空格和Enter事件无法触发问题
qq_41068362的博客
08-13 50
在el-input外层包了一层el-tooltip导致space和enter失效
Vue3+Element-plus+setup使用vuemap/vue-amap实现高德地图API相关操作
weixin_72439307的博客
08-07 437
本文主要是在vue3中使用el-amap组件实现地图的展示以及相关窗体信息内容自定义渲染
【Vue3-Typescript】＜script setup lang=“ts“＞ 使用 ref标签 怎么获取 refs子组件呢
weixin_43343144的博客
08-13 136
注意：请确保子组件已经正确挂载，并且通过。暴露了您想要在父组件中访问的属性或方法。
Vue设置滚动条自动保持到最底端
Lipn_的博客
08-09 498
实现滚动条始终保持在最底端
vue中怎么自定义组件
qinshi501的博客
08-09 1275
在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息。: number // 变动类型：1-用户金额。
Element UI顶部导航栏与左侧导航栏联动实现~
m0_62626838的博客
08-12 168
需求：点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。
SpringBoot + RabbitMQ + WebSocket + STOMP 协议 + Vue 实现简单的实时在线聊天案例
liber.info
08-09 1054
WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许客户端和服务器之间的实时、双向数据传输。与传统的HTTP请求/响应模型相比，WebSocket更加高效，因为它在初次握手后，连接保持打开状态，可以不断传输数据。
vue3选项式生命周期
09-18
Vue3 的选项式生命周期主要有 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount`、`unmounted` 等生命周期钩子函数。 1. `beforeCreate`：组件实例刚在内存中创建...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值