vue文档部分笔记
前言:写这个笔记的原因是,对vue的细节的一个整理,vue会使用,但是自己以前都是一个大概了解。这次趁着有点时间跟着官方文档整理一下,加深自己的理解。
1.vue是什么?
vue是一套用于构建用户页面的渐进式JavaScript框架(开发可以根据需求,逐渐递增所要的方式)。
① 声明渲染

只要你修改了data里面的变量的值,视图上也会跟着更改
②v-if

③v-for

④v-show
实际上v-show和v-if是很相似的,不同的是v-if是创建和销毁节点,但是v-show只是控制了元素的css 的显示与隐藏
⑤v-model

⑥vue的生命周期

vue有八个生命周期分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
beforeCreate(实例组件刚被创建,元素和DOM和数据还没被初始化,暂时不能进行生命的操作)
created(数据data被初始化完成,这里面可以,操作方法,请求接口,但是DOM还没渲染)
beforeMount(DOM未完成挂载,数据也初始化完成了但是还没有挂载到页面,{{还是空白}},坑位是占住的)
mounted (页面挂载完成,{{值}},页面渲染完成,这里面也可以请求接口,但是更建议在created里面请求)
beforeUpdate(一般不会写,页面数据还是原来的数据,但是数据更新改变了就会触发这个生命)
updated(数据更新完成,beforeUpdate和updated要谨慎使用,因为页面更新数据的时候都会触发,在这里操作数据很影响性能和容易死循环。)
beforeDestroy(组件销毁之前执行,可以在里面清除一些定时器啊之类的东西)
Destroyed(销毁后,这个生命一般不怎么用到吧,个人觉得)
⑦在父组件里引入注册的子组件+传值给子组件

⑧子组件给父组件传值


⑨计算属性

⑩watch

关于computed 和watch 的区别
computed是计算,有缓存,页面重新渲染不会改变, watch是观察、无缓存、页面值不变也话也会执行。
⑪事件

2.vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 。它采用集中式存储管理应用的所有组件的状态。
什么时候我们场景下我们会用到 ?
Vuex 可以帮助我们管理共享状态,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
vuex 和全局变量有什么不同 ?
vuex的状态是响应式的,不能直接修改