svg - 虚拟dom

svg 图标的处理 - 工程化的方案

1 - 安装 loader

       npm i svg-sprite-loader@4.1.3

2 - 配置vue.config.js

chainWebpack(config) {
set svg-sprite-loader
config.module
  .rule('svg')
  .exclude.add(resolve('src/icons'))
  .end()
config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(resolve('src/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'icon-[name]'
  })
  .end()
   }

3 - 创建一个svg图标的组件

  src\components\SvgIcon\index.vue

4 - 创建icons文件夹,在index.js中注册成全局组件

src\ions\index.js

 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component


 register globally
  Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

svg目录下,保存从别处收集到的svg图片

5 - 在main.js中引入ions/index.js

6 - 使用组件

   	<svg-icon icon-class="tree" />
	 <svg-icon icon-class="user" />
    
   
	icon-class中的 tree,user 对应svg中的图片

收集使用的svg

1 - 下载

	.svg是一种通过代码的方式来展示的图片格式 (.png, .gif ...)
	学习网站  https://www.runoob.com/svg/svg-tutorial.html
	下载网站  https://www.iconfont.cn/

2 - 新建.svg文件

	把复制的代码粘过来
	把 .svg放在src/ions/svg下

3 - 使用

 	<svg-icon icon-class="qq1" />
	qq1 就是上边自己写的 .svg文件名

render 基本使用

作用 :

一个组件的内容有两种书写方式 :
1 - template : 常见写法.通过模板语法来指定组件内容
2 - render : 通过render函数来确定组件的内容
render : (h) => { return h() }
3 - 如果在定义组件时 ,两者同时存在 ,(template , render) 并且都在script标签内 则会以render为准 template 不在script标签内 则以template为准
对于.vue (单文件组件来讲) , 相当于把原来要写在组件内部的template 配置项 , 移动到了外面
render用来决定组件的内容 (更一般的情况,是用template来决定)
render 相对于template 更加灵活

虚拟dom概念

虚拟dom(VNode) . 虚拟 : 假的,不是真实的dom
1 - 真实的dom
在浏览器中通过 dom api 操作的 , 复杂的对象
真实的dom 是一个对象 ,它的属性非常非常的多,在浏览器中 做dom 操作相对来说 会比较消耗性能
2 - 虚拟的dom
this.$slots.default
虚拟dom 是一个对象 , 它的属性相比于真实dom 就比较少 — 用少量的属性来描述一个dom , 他无法在浏览器中直接显示

为什么在vue 中会用到虚拟dom

有两点好处
1 - 虚拟dom比真实dom 体积小 , 操作时相对来说消耗性能少 . 要在页面要删除一个dom 会引起页面重绘 , 它很可能会影响后边元素的布局
2 - 虚拟dom 才可能跨端 (在服务端也可以使用vue技术 ) ,跨平台 . 如果直接操作真实dom 则与浏览器强制绑定在一起 , vue 就失去更多的可能

vue 是如何使用虚拟dom

1 - 所有的template 都进一步编译成render
2 - render() 会根据当前的数据项,生成虚拟dom
3 - 生成虚拟dom 后 在 转成真实dom

响应式与render函数

render()  +   初始数据  ===>    初始虚拟dom
render()   +   新数据    ===>   新的虚拟dom 
	 响应式  :  数据变化会再去执行render
对比这两个虚拟dom 的区别 
更新真实dom
数据变化 会自动调用一次 render () 函数 , 产生一个新的虚拟dom 把这个新的虚拟dom 与初始比较 这样就可以知道哪些地方发生了变动 , 在这个变动同步更新到真实dom