插槽、单向数据流、数据劫持顺序、网络代理配置

铃铛儿√

于 2022-09-06 23:04:29 发布

阅读量123

点赞数

文章标签：网络 webpack 前端

本文链接：https://blog.csdn.net/qq_46479336/article/details/126717992

版权

组件的认识
组件是可以复用的把组件当做一种标签使用用一次它内部的代码就会完整的执行一次――就像足一个函数—样,使用组件就相当于在调用函数实参就相当于组件的属性传值
有的朋友说数据不习惯写在data中喜欢直接写在模板标签中,这个想法是对的﹐我们本来就没必要把数据写在data中,你在开发时―数据尽呈不要放在data中．数据驱动页面要这个数据未来有可能发生变化才放在data中.换一种说法就是你不要把数据放在data中只有当项目需要用data的时候你自然就会想起它
关于项目资源打包问题：
项目中的本地资源打包时，webpack打包时遇到了import或者是标签内部直接写路径时都会启用file-loader等去加载资源，如果把图片等本地资源的路径写在data中然后页面使用因为webpack不会读取data 所以不会打包资源。项目中的资源一般不要包含图片，应该让服务器托管
写代码时波浪线：
v-for不写key 会有警告，绑一个就行了，如果数据中没有id 就绑for循环的下标﹐不管它也行不影响
在标签其他地方小黑窗报错了︰把webpack中配置的eslint的严格检测关闭了lintonSave:false
编辑器内部还有波浪线把vscode的插件禁用(自己测试)，记得重启编辑器（点击文件退出）

组件的自定义事件

事件的三要素：

事件的三要素: 事件源 target 事件类型type 监听器handler
$emit,：子组件可以使用 $emit,让父组件监听到自定义事件
自定义事件
在组件内部触发事件 this.$emit(“事件名”,参数1,参数2…)
使用组件时绑定监听器,内部触发事件时监听器就会调用

网络代理配置

1、先在App.vue中引入axios，如果没有就在小黑窗npm i axios
在这里插入图片描述
2、下载egg框架 npm i egg --type=simple 一直点击回车，根据提示 npm i
下好之后去config文件夹下配置

开启插件

// config/plugin.js文件
  cors:{
    enable: true,
    package: 'egg-cors',
  }

配置插件

// config/config.default.js文件
  config.cors = {
        origin: '*',
        //allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  }

3、配置路由
在这里插入图片描述
4、controller

5、在server中npm run dev
在浏览器中输入http://xxx.xxx.xx.xx:7001/ajax1

6、在vue.config.js中配置

module.exports = {
    devServer: {
		//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
		open: true, //cli中 webpack serve --open					
						
		//本地服务器监听的端口
		port: 8080,
		
		//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
	    hot: true,
		
		//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
        //让你同桌访问 然后你改项目代码 他就会刷新
		host: '192.168.2.60',
		
		//启用gzip压缩
		compress: true,
			
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		proxy: {
			'/api': 'http://localhost:7001',
		},
		 // proxy: {
		 //      '/api': {
		 //        target: 'http://localhost:7001',
         //        secure:true,//如果代理的target是https接口,需要配置它 
		 //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
		 //      },
		 //    },
	   }		
	}

只配自己需要的
在这里插入图片描述

组件中使用:
this.$axios(“/ajax1”)
整个运行的流程: $axios是原型上的那个工具就会基于它的baseURL请求"/ajax1" 因此就会请求 baseURL+“/ajax1”
然后baseURL又是8080服务器中代理配置过的它发现网址中包含了代理的关键字网址就会去代理请求 target网址

插槽

设计组件里面:

    默认槽位:< slot> < /slot>
    具名槽位:< slot name="s1"> < /slot>  < slot name="s2"> < /slot>
  使用组件时:
     < 组件名> 尖括号中的东西插入默认槽位 < /组件名>
     < 组件名> 
	         < template v-slot:s2>插入东西必须放这个标签中,老版本不用< template>
	         < template #s1>插入东西必须放这个标签中,老版本不用< template>
	< /组件名>

总结: v-slot:s2 是具名插槽的用法 #s1是插槽的语法糖

数据劫持的顺序

Vue.prototype._init = function (options?: Object) {
  initLifecycle(vm) //1.初始化生命周期的函数
  initEvents(vm) //初始化事件
  initRender(vm)//生成vnode的模板
  callHook(vm, 'beforeCreate')//触发beforeCreate钩子
  initInjections(vm) //接受提供者提供的数据
  initState(vm)//初始化状态:具体过程在下面函数中
  initProvide(vm) //给别人提供数据
  callHook(vm, 'created')//触发created钩子
}

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props) //有属性就初始化属性
  if (opts.methods) initMethods(vm, opts.methods)//有方法就初始化方法
  if (opts.data) {//有数据源就初始化数据源
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)//没有就监听自带的数据源
  }
  if (opts.computed) initComputed(vm, opts.computed)//有计算属性就初始化计算属性
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)//对属性监听
  }
}
//源码分析的结果:属性props>方法methods>数据源data>计算属性computed>对属性监听watch

单向数据流

单向数据流: 数据自向上由底层流向顶层但是不能反向

单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态。与单向数据流对对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合）中可以修改自己或其他Model的状态，用户的操作（如在输入框中输入内容）也可以修改状态。这使改变一个状态有可能会触发一连串的状态的变化，最后很难预测最终的状态是什么样的。使得代码变得很难调试。与双向数据流比，在单向数据流中，当你需要修改状态，完全重新开始走一个修改的流程。这限制了状态修改的方式，让状态变得可预测，容易调试。

DIFF

什么是DIFF
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了


DIFF算法的过程
当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过sameVnode进行判断，相同则调用patchVnode方法
patchVnode做了以下操作：
找到对应的真实dom，称为el
如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
如果oldVnode有子节点而VNode没有，则删除el子节点
如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
如果两者都有子节点，则执行updateChildren函数比较子节点
updateChildren主要做了以下操作：
设置新旧VNode的头尾指针
新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

SCSS

可以在这里新建一个文件，然后可以用插件将scss文件转为css文件，然后再从main.js中引进来，但是这种方法做项目一般不常用，是因为scss转为了css它就是一个全局样式表，而我们则是希望可以再App中的style标签中直接写scss（想要作用域还想要scss）
要用scss我们就需要加载器，在小黑窗中输入 vue create 项目名

空格选中，enter下一步

空格取消选中Lint on save 回车后面就一直回车就好了