正文

vue开发实战基础篇#8：如何触发组件的更新(代码片段)

凯小默  凯小默  2022-12-08  625

关键词：

说明

【Vue 开发实战】学习笔记。

数据驱动

数据来源（单向的）

状态 data VS 属性 props

状态是组件自身的数据
属性是来自父组件的数据
状态的改变未必会触发更新
属性的改变未必会触发更新

例子：

index.vue 代码

<template>
    <div id="app">
        <p>
            <button @click="handleNameChange">change this.name</button>
            <button @click="handleInfoChange">change this.info</button>
            <button @click="handleListChange">change this.list</button>
        </p>
        <PropsAndData :info="info" :name="name" :list="list"></PropsAndData>
    </div>
</template>

<script>
import PropsAndData from './PropsAndData.vue';
let name = "kaimo313";
export default 
    data () 
        this.name = name;
        return 
            info: ,
            list: []
        ;
    ,
    components: 
        PropsAndData
    ,
    methods: 
        handleNameChange() 
            this.name = "vue" + Date.now()
            console.log("this.name 发生了变化，但是并没有触发子组件更新", this.name);
        ,
        handleInfoChange() 
            this.info.name = 1;
            console.log("this.info 发生了变化，但是并没有触发子组件更新", this.info);
        ,
        handleListChange() 
            this.list.push(1, 2, 3)
            console.log("this.list 并没有发生变化，但是触发子组件更新", this.list);
        
    ,
;
</script>

PropsAndData.vue 代码

<template>
    <div>
        <p>props.info：info</p>
        <p>props.name：name</p>
        <p>props.list：list</p>
        <p>data.a：a</p>
        <p>
            <button @click="handleBChange">change data.b</button>
        </p>
    </div>
</template>

<script>
export default 
    name: "PropsAndData",
    props: 
        info: Object,
        name: String,
        list: Array
    ,
    data () 
        return 
            a: "hello",
            b: "world"
        ;
    ,
    updated() 
        console.log("触发 PropsAndData updated");
    ,
    methods: 
        handleBChange() 
            this.b = "vue" + Date.now();
            console.log("data.b 发生了变化，但是并没有触发组件更新");
        
    ,
;
</script>

点击这个三个都没有触发组件更新

因为 name 不是响应式，info 对象才是响应式，b 没有被视图使用

响应式更新

vue开发实战基础篇#3：vue组件的核心概念：事件(代码片段)

说明【Vue开发实战】学习笔记。事件vue提供了一个简单的方式进行绑定事件，就是使用@xxx就可以进行事件绑定，这里以click事件为例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta... 查看详情

vue开发实战基础篇#2：组件基础及组件注册(代码片段)

说明【Vue开发实战】学习笔记。组件通常把可拆分的html，以及拆分后的逻辑，样式组合在一起称之为组件。在Vue中，通过Vue.component定义（注册）一个组件：<!DOCTYPEhtml><htmllang="en"><head>... 查看详情

vue开发实战实战篇#46：如何做好组件的单元测试(代码片段)

说明【Vue开发实战】学习笔记。配置jest.config.js文件https://v1.test-utils.vuejs.org/zh/installation/#%E7%94%A8-jest-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6module.exports=//preset:"@v 查看详情

vue开发实战基础篇#12：常用高级特性provide/inject(代码片段)

说明【Vue开发实战】学习笔记。组件通信provide/inject底层通用组件用的很多。进行跨组件通信。要实现组件E变化，更新F、I组件A<template><divclass="border"><h1>A结点（第一级）</h1><button@click&... 查看详情

vue开发实战学习笔记48篇（完结）

说明【Vue开发实战】学习笔记。学习笔记代码仓库：https://github.com/kaimo313/vue-development-practice目录【Vue开发实战】基础篇#1：第一个Vue程序【Vue开发实战】基础篇#2：组件基础及组件注册【Vue开发实战】基础篇#3：Vue... 查看详情

vue开发实战基础篇#4：vue组件的核心概念：插槽(代码片段)

说明【Vue开发实战】学习笔记。插槽Vue实现了一套内容分发的API，这套API的设计灵感源自WebComponents规范草案，将<slot>元素作为承载分发内容的出口。匿名插槽<!DOCTYPEhtml><htmllang="en"><head><metacha... 查看详情

vue开发实战实战篇#45：如何构建可交互的组件文档让代码高亮的显示在页面(代码片段)

说明【Vue开发实战】学习笔记。效果要实现这个代码的显示使用raw-loader实现代码输出到页面https://github.com/webpack-contrib/raw-loadernpminstallraw-loader--save-dev我们不走webpack的配置，使用下面一种方式importchartCodefrom"!!raw-loader!@/c... 查看详情

vue开发实战实战篇#34：如何在组件中使用echartsantv等其他第三方库(代码片段)

说明【Vue开发实战】学习笔记。效果这里我们使用echarts为例在项目里面添加echarts库安装依赖npmiechartsresize-detectorChart.vue<template><divref="chartDom"></div></template><script>import*asechartsf 查看详情

vue开发实战拓展篇#47：如何发布组件到npm以及nrm的介绍(代码片段)

说明【Vue开发实战】学习笔记。发布到npm具体可以参考我的这篇文章：怎么将自己写的库发布到npm上面？这里具体介绍一下nrm的使用什么是nrmhttps://github.com/Pana/nrmnrm可以帮助您轻松快速地在不同的NPM注册表之间切换，... 查看详情

vue开发实战实战篇#41：如何管理系统中使用的图标(代码片段)

说明【Vue开发实战】学习笔记。先在iconfont里新建一个项目然后将需要的图标添加入库：https://www.iconfont.cn/比如我的项目如下：全局注册图标组件https://1x.antdv.com/components/icon-cn/importVuefrom"vue";importAppfrom"./App.vue" 查看详情

vue开发实战实战篇#43：如何做好国际化(代码片段)

说明【Vue开发实战】学习笔记。LocaleProvider国际化为组件内建文案提供统一的国际化支持。https://1x.antdv.com/components/locale-provider-cnApp.vue配置<template><divid="app"><a-locale-provider:locale="local 查看详情

vue开发实战基础篇#14：template和jsx的对比以及它们的本质(代码片段)

说明【Vue开发实战】学习笔记。template模板语法(HTML的扩展)数据绑定使用Mustache语法(双大括号)JSXJavaScript的语法扩展数据绑定使用单引号templatevsJSX更抽象一点来看,我们可以把组件区分为两类：一类是偏视图表现的(presentational)... 查看详情

vue开发实战实战篇#33：更加精细化的权限设计（权限组件权限指令）(代码片段)

说明【Vue开发实战】学习笔记。效果实现两种方式实现权限组件的控制，比如下面两个地方的按钮控制，如果是user用户，就没有权限控制函数式组件<script>importcheckfrom'../utils/auth';exportdefaultfunctional:true,props:a... 查看详情

vue开发实战实战篇#40：自己封装一个支持自动校验的表单项(代码片段)

说明【Vue开发实战】学习笔记。自定义表单控件自定义或第三方的表单控件，也可以与Form组件一起使用。只要该组件遵循以下的约定：提供受控属性value或其它与valuePropName-参数)的值同名的属性。提供onChange事件或trigger-... 查看详情

如何搭建组件库（基础实战篇）

一、搭建组件库有什么好处？让设计更高效、开发更迅速、产品体验更一致。很多大厂也做了自己的组件库，比如AntDesign，Element等，一个成熟的组件库确实让产品的体验更好，团队的效率更高。如果你也想开始搭建你们产品自... 查看详情

如何搭建组件库（基础实战篇）

vue开发实战实战篇#26：antdesignpro介绍(代码片段)

说明【Vue开发实战】学习笔记。AntDesignProhttps://pro.ant.design/zh-CNANTDESIGNPRO：开箱即用的中台前端/设计解决方案特性高效快速：基于ModuleFederation，项目秒启动模板组件：内置模板组件，高效开发国际化：提供... 查看详情

vue基础篇--8组件基础component(代码片段)

Vue基础篇--8组件基础component1.简单示例<divid='components1'><button-conter></button-conter></div><script>//定义一个名为button-conter组件Vue.component("button-conter",data:function()returncount:0,template:`<buttonv-on:click="c... 查看详情