vue2.0框架认识

Posted 2020-10-15 鱼樱、、

虚拟dom和声明式渲染：

Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数 。而函数被调用的时候就会渲染并且返回一个 虚拟DOM的树 。
这个树非常轻量，它的职责就是描述当前界面所应处的状态。当我们 有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上 。
在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。
到时候就可以根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新树与旧树进行对比，就可以最终得出应施加到真实DOM上的改动。

Vue是一个数据驱动页面的一个框架，基于MVVM模式，M指的是数据，V指得是视图，VM是视图模型，将数据绑定视图上。

这个框架着重于VM部分,它以DOM元素为模版，提供数据绑定的功能。一个web app可能会含有多个vue组件。Vuex是基于vue的web app框架。

核心思想都是一样，把UI结构映射到恰当的组件树 ↓↓↓↓↓↓↓↓↓↓↓↓↓

父子通讯:
在Vue中，父子组件之间的通信是通过 props 传递。
.vue文件??
Vue的组件引入构建工具之后有一个 单文件组件概念 ，如
在同一个Vue文件里，可以同时写 template, script 和 style，三个东西放在一个里面。
同时，Vue的单文件组件和 Web Components 有一个本质不同，它是基于构建工具实现。
这样的好处是有了一个构建的机会，可以对这些单文件组件做更多的分析处，在每一个语言块里可以单独使用不同的处理器

这三个东西是一个单向数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，会使State产生变化，从而导致 View 重新渲染。

state--->view---->Action(再回到state去)

css引入时：scoped

优势：不同的页面即使相同的层级、相同的class或者id都不会互相影响。

2、css使用 style的动态样式表

使用vue的过程中，发现使用的不是平时开发用的 style后缀的文件，而是类似于less/sass 的动态样式。

优势：动态的样式表，层级更加精确、减少了几乎所有的层级冗余代码、可以设置样式变量这样会减少很多的样式不统一的错误，以及减少代码量等，这样大大加快了样式的开发速度。

vuc-cli

npm run dev

npm run dev：热重载，在项目脚手架搭建完成之后，运行这个命令行，会开启代码做了修改之后，一旦ctrl+s，或者焦点离开IDE，就会局部刷新页面。

但是美中不足的是，当动态的数据发生变化后，页面DOM是没有刷新的，只有手动刷新页面DOM数据才会发生变化。当然，在vue已经提供了强大的方便的前提下，这点小瑕疵是我完全可以接受的。

严格模式

语法检查可要可不要（建议开启代码规范前期初学者可关闭）

作用域：

通过el定义一个Vue视图的容器元素，可以传递css选择器，id选择，类选择器，元素名称选择器等等

页面中有多个符合条件选择器，vue只会捕获第一个符合条件的选择器对应的元素选择器

data：数据绑定实现了将模型到视图模型的绑定

总结起来：（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块化 （6） 组件化Vue

项目骨架：static静态文件 src下 static这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下,这样按默认打包后，就不会图片路径错误而无法显示