VUE实践总结

channg 发布于2019-08-22 17:56 / 1124人阅读

摘要：前言本文主要总结了自己实际开发项目当中遇到的一些常见问题以及解决方案组件的是当一个组件被定义，必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。实在要比较只能比较对象的具体值了。

前言

本文主要总结了自己vue实际开发项目当中遇到的一些常见问题以及解决方案

VUE组件的data是function

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！

解释：如我们所知，Object是引用类型，如果组件的data是Object就会影响到所有的实例

VUE如何传递参数给子组件

对于父组件来说等价于给子组件绑定了一个属性

// parent.vue

然后子组件需要通过props接收到父组件的参数

// child.vue
props:{
    isShow:{
        type:Boolean,
        default:false
    }
}

VUE子组件如何传递参数给父组件

对于数据绕子组件执行一圈又回到父组件的需求是很常见的。

对于子组件来说，子组件处理完逻辑后通过$emit发送一个消息（事件）

// child.vue
methods:{
    logic(){
        this.$emit("someMsg",param1,param2);
    }
}

对于父组件来说，在子组件的"标签"上监听这个消息（事件）

// parent.vue

VUE父组件调用子组件的function

// parent.vue

VUE修改数据视图不更新问题

新手经常会碰到这种情况，我明明改变了这个变量，但是视图竟然没有更新，说好的mvvm呢，黑人问号？

产生的原因很可能就是下面这句话了

因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = "hi")

细纠一下原因就是，vue的响应式原理是get的时候依赖收集 （添加Watcher），set的时候通知相关的Watcher进行视图更新，直接给对象添加一条数据自然没有这个过程，所以自然无法更新视图啦~

解决方案：Vue.set( target, key, value ) （别名：vm.$set(target, key, value) ）

VUE watch配置注意事项

computed的作用是监听数据变化计算出属性，watch的作用就是监听数据变化执行相应的逻辑，but这里需要注意一下

如果你监听的是一个对象，你需要这样

然后还有，因为是对象，所以oldValue!==newValue行不通滴。实在要比较只能比较对象的具体值了。然后这里又容易触发另外一个问题，数据初始化的时候也会触发watch，so要做好临界判断哦~~

vue生命周期阶段详解

大致可以分为8个阶段

beforeCreate：创建前，这个阶段组件的$data和$el都为undefined

created：创建完成，这个阶段$data已经初始化完成

beforeMount：$el依然为undefined，虚拟dom阶段

mounted：$el挂载值

beforeUpdate：组件更新前

updated：组件更新后

beforeDestroy：组件销毁前

destroy：组件销毁后

专线服务混合云 vue20开发实践学习实践架构实践开发实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95338.html

前端每周清单年度总结与盘点

摘要：前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址，感谢每一位阅读鼓励过的朋友，希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了...

jackwang 2019-08-22 15:54 评论0 收藏0
Vue开发总结及一些最佳实践（已更新）

摘要：基本开发环境创建的项目，作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试基本开发环境 vue-cli3 创建的项目，vscode 作为代码编写工具vscode插件推荐：vscode 插件配置文章目录项目目录结构介绍...

NotFound 2019-08-26 13:47 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0