0
点赞
收藏
分享

微信扫一扫

GIS Java 生成四至图

止止_8fc8 2024-06-02 阅读 11
vue.jsuni-app面试

1.vue2和vue3的区别（vue3与vue2的区别（你不知道细节全在这）_vue2和vue3区别-CSDN博客）参考

  • Vue3 在组合式（Composition ）API，中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子
// vue3
<script setup>     
import { onMounted } from 'vue';   // 使用前需引入生命周期钩子
 
onMounted(() => {
  // ...
});
 
// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {
  // ...
});
</script>
 
// vue2
<script>     
export default {         
  mounted() {   // 直接调用生命周期钩子            
    // ...         
  },           
}
</script>

  • vue2只能有一个根节点，vue3支持多个根节点

  • vue2和vue3的响应式原理 ：（浅析一下vue2.0 和 vue3.0 响应式原理 - 掘金 (juejin.cn)）参考

常用生命周期对比如下表所示：

vue2和vue3的监听有什么区别 ：

2.vue2和vue3中组件之间的传值方式

1.父传子

v2和v3的父传子差不多
// ParentComponent.vue  
<template>  
  <ChildComponent :message="parentMessage" />  父组件定义的变量parentMessage用message来绑定
</template>  

<script>  
import ChildComponent from './ChildComponent.vue';  

export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent'  
    };  
  }  
};  
</script>  

// ChildComponent.vue  
<template>  
  <div>{{ message }}</div>  
</template>  

<script>  
export default {  
  props: ['message']  用props来接收父组件绑定的方法
};  
</script>

2.子传父 

子传父
// ChildComponent.vue  
<template>  
  <button @click="notifyParent">Notify Parent</button>  
</template>  

<script>  
export default {  
  methods: {  
    notifyParent() {  
      this.$emit('child-event', 'Hello from Child');  //点击按钮传递一个叫child-event的，内容为Hello from Child
    }  
  }  
};  
</script>  

// ParentComponent.vue  
<template>  
  <ChildComponent @child-event="handleChildEvent" />  //父组件绑定的方法和子组件传递过来的名字一样，父组件用handleChildEvent方法接收打印出来
</template>  

<script>  
import ChildComponent from './ChildComponent.vue';  

export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleChildEvent(message) {  
      console.log(message); // "Hello from Child"  
    }  
  }  
};  
</script>

 3.vuex

Vuex 示例（这通常涉及到更多的代码，这里只给出大致的概念）：
// store.js  
import Vue from 'vue';  
import Vuex from 'vuex';  

Vue.use(Vuex);  

export default new Vuex.Store({  
  state: {  
    message: 'Hello from Vuex'  
  },  
  mutations: {  
    updateMessage(state, payload) {  
      state.message = payload;  
    }  
  }  
});  

// 在组件中  
this.$store.commit('updateMessage', 'New message');  
// 在模板中  
{{ $store.state.message }}

4.Vue3组件通信之一_provide()与inject()依赖注入函数Provide / Inject (依赖注入) 

Vue3组件通信之一_provide()与inject()依赖注入函数-CSDN博客（参考）

// ParentComponent.vue (或更高层级的组件)  
<script>  
export default {  
  provide() {  
    return {  
      message: 'Hello from Provide/Inject'  
    };  
  }  
};  
</script>  

// ChildComponent.vue (或任意深层的组件)  
<script>  
export default {  
  inject: ['message'],  
  mounted() {  
    console.log(this.message); // "Hello from Provide/Inject"  
  }  
};  
</script>

3.路由守卫Vue路由守卫详解-CSDN博客

4.webpack和vite的配置 webpack 与 vite的区别_webpack和vite的区别-CSDN博客

5.es6新语法有哪些20分钟上手ES6，不会ES6好意思说自己会JS ？_const m = (l + r) >> 1;-CSDN博客

JavaScript高级——ES6基础入门_js es6-CSDN博客

ES6常用方法 总结大全_es6常用的方法-CSDN博客

6.vue中使用keep-alive进行组件缓存Keep-alive组件缓存的使用_keepalive: false-CSDN博客（参考）

keep-alive是Vue提供的一个内置组件，被keep-alive组件包裹的内部组件，其状态将被缓存
keep-alive包裹的组件，其生命周期只能被执行一次，再次进入时不会被执行
keep-alive包裹的组件，会自动新增两个生命周期函数activated和deactivated，每次进入都会被执行
activated( ) 当keepalive包含的组件再次渲染时触发
deactivated( ) 当keepalive包含的组件销毁时触发
keep-alive两个属性include和exclude,可以让keep-alive实现有条件的进行缓存。include匹配到的组件会被进行缓存，exclude匹配到的组件不会被缓存

7. 计算属性computed和watch的区别

computed（计算属性）和watch（侦听器）的区别_watch和计算属性的区别-CSDN博客

计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。

<template>  
  <div>  
    <p>原始价格: {{ price }}</p>  
    <p>优惠价格: {{ discountedPrice }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      price: 100,  
      discount: 0.1 // 10% 的折扣  
    };  
  },  
  computed: {  
    discountedPrice() {  
      // 当 price 或 discount 发生变化时，这个函数才会重新计算  
      return this.price * (1 - this.discount);  
    }  
  }  
};  
</script>

侦听器（Watchers）

侦听器允许你执行异步或开销较大的操作，并可以访问数据变化的先前值和当前值。

<template>  
  <div>  
    <input v-model="searchQuery" placeholder="搜索...">  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      searchQuery: ''  
    };  
  },  
  watch: {  
    // 当 searchQuery 发生变化时，这个函数会被调用  
    searchQuery(newVal, oldVal) {  
      // 这里可以执行一些异步操作，比如 API 请求  
      console.log(`搜索查询已更改: ${oldVal} -> ${newVal}`);  
      // 模拟 API 请求  
      setTimeout(() => {  
        console.log(`搜索结果为: ${newVal}`);  
      }, 1000);  
    }  
  }  
};  
</script>

 8.闭包和作用域

  • 闭包

1.内部函数可以访问外部函数的局部变量。

2.外部函数嵌套内部函数

3.内部函数可以使用外部函数的局部变量

手写一个闭包：

function makeSizer(size){
return function(){
docoment.body.style.fontsize=size+'px';
  }
}
var size12=makeSizer(12);//size12指向的函数，可以设置body的fontSize为12px
var size14=makeSizer(14);//size14指向的函数，可以设置body的fontSize为14px
var size16=makeSizer(16);//size16指向的函数，可以设置body的fontSize为16px

  • 作用域​​​​​​​

9.防抖节流

防抖：当事件被触发后，延迟n秒再执行核心代码，如果在这n秒内再次被触发，就重新计时（像王者里面的回城一样）

场景：可以使用防抖技术优化搜索框建议词列表展示功能

手写防抖

//定义一个变量指向延时器
var time=null;
//某事件会触发的回调函数
function doSomething(){
//先删除有可能已存在的延时器
clearTimeout(timer)
//创建新的延时器
time=seTimeout(function(){
//真正要执行的核心代码或者调用核心函数
//code
console.log('核心代码')
  },500)
}

​​​​​​​

节流：是一种有效降低单位时间内，核心代码执行次数的机制

场景：如果事件被频繁触发，节流能减少事件触发的频率，因此，节流是有选择性的执行一部分事件，如：使用节流优化滚动条事件的监听，避免滚动事件的回调函数太过频繁执行

手写：

function throttle(func, delay) {  
    let lastCall = 0;  
    return function() {  
        const now = new Date().getTime();  
        if (now - lastCall < delay) {  
            return;  
        }  
        lastCall = now;  
        return func.apply(this, arguments);  
    };  
}
//可以像这样使用这个简化版的节流函数
const throttledScrollHandler = throttle(function() {  
    console.log('Scrolled!');  
}, 250); // 每250毫秒最多执行一次  
  
window.addEventListener('scroll', throttledScrollHandler);

9.模块化开发 和 面向对象编程 

 10.作为一个前端怎么处理图片，也就是怎么实现图片懒加载

 

案例演示：

延伸：怎么用防抖（debounce）或节流（throttle）技术来优化图片懒加载性能

好处：防抖（debounce）和节流（throttle）技术都是用于优化高频率触发事件（如滚动事件）的性能的手段。在图片懒加载的场景中，我们可以使用这些技术来减少不必要的计算和DOM操作，从而提升性能。

防抖的基本思想是：设置一个定时器，在事件被触发后n秒内函数只能执行一次，如果在这n秒内又被重新触发，则重新计算执行时间。在图片懒加载中，我们可以使用防抖来确保在滚动停止后才开始检查图片是否在视口内。

function debounce(func, wait) {  
  let timeout;  
  return function executedFunction(...args) {  
    const context = this;  
    clearTimeout(timeout);  
    timeout = setTimeout(() => func.apply(context, args), wait);  
  };  
}  
  
// 使用防抖的图片懒加载函数  
const checkLazyImages = debounce(function() {  
  // 检查并加载视口内的图片  
  // ...  
}, 200); // 设置防抖时间为200毫秒  
  
window.addEventListener('scroll', checkLazyImages);

 节流的基本思想是：设置一个冷却时间，在事件被触发后n秒内只执行一次，之后在这n秒内，无论事件被触发多少次，函数都不会执行。在图片懒加载中，我们可以使用节流来确保检查图片是否在视口内的函数不会过于频繁地执行。

function throttle(func, limit) {  
  let inThrottle;  
  return function executedFunction(...args) {  
    const context = this;  
    if (!inThrottle) {  
      func.apply(context, args);  
      inThrottle = true;  
      setTimeout(() => inThrottle = false, limit);  
    }  
  };  
}  
  
// 使用节流的图片懒加载函数  
const checkLazyImages = throttle(function() {  
  // 检查并加载视口内的图片  
  // ...  
}, 200); // 设置节流间隔为200毫秒  
  
window.addEventListener('scroll', checkLazyImages);

注意事项

  • 在实际应用中，防抖和节流的选择取决于具体的需求。如果你希望在用户停止滚动后一次性加载所有图片，那么防抖可能更合适。如果你希望保持一定的加载频率，无论用户是否停止滚动，那么节流可能更合适。
  • 在实现防抖和节流函数时，注意保持对原始函数上下文（this）和参数的引用。
  • 还可以使用已经实现了防抖和节流功能的库，如lodash的_.debounce和_.throttle方法，以避免重复造轮子。
  • 在图片懒加载的实现中，除了使用防抖和节流外，还可以考虑使用Intersection Observer API来更高效地检测图片是否进入视口。
举报

相关推荐

精读《C++ primer》学习笔记（第四至六章）

c++

arcgis宗地或者地块四至权利人信息提取教程

架构javajvm

java 项目 生成火焰图

Javaci性能瓶颈后端开发

java image生成矢量图

Imagejava矢量图Java后端开发

Java开源GIS系统

JavaGIS开源软件应用程序地理信息系统

java 地图gis开发

空间数据Java数据后端开发

java 四位编号生成

gitJava序列号后端开发

java 自动生成流程图 插件

流程图Java开发者后端开发

如何使用java生成 Excel 股票图？

java数据apacheHtml/CSS前端开发

PowerDesigner导入java类生成类图

java类图java包
0 条评论